Why does not my element type ul disappear when I hover over another element?

First of all , you should start knowing that the way to layout the menu is undue, since you do it by nesting the <li> within the <a> and it should be the opposite.

You do it like this:

<ul>
 <a>
  <li> </li>
 </a>
</ul>

And it should be:

<ul>
 <li>
  <a> </a>
 </li>
</ul>

Second (after correcting the above), the logic behind a drop-down menu, via css as you are trying to do, is like this:

Html :

<ul>
 <li>
   <a></a>
   <ul>
    <li>
      </a></a>
    <li>
   </ul>
 </li>
</ul>

And the CSS :

li ul{
  display: none;
}

li:hover ul{
  display: block;
} 

The previous one is the most recommended way , since the submenu will not hide by mistake when you are on it, since it is part of the <li> container element and you will always be on this .

The choice of ~ selector is for when you want to affect sibling elements and it is a variant, which may also be useful, but you will have trouble selecting menu options because it will hide once try to get on top of the submenu. However, it does not work for you, because the element that activates the appearance of the submenu, is not found next to the submenu, but surrounds it.

So you have it:

<ul>
 <li>
   <a><!--Este elemento envuelve el submenú-->
     <ul>
       <li>
         </a></a>
       <li>
     </ul>
   </a>
 </li>
</ul>

And it should be:

<ul>
 <li>
   <a></a>
   <!--Cómo  ves el submenú está al mismo nivel del enlace-->
   <ul>
     <li>
      </a></a>
     <li>
   </ul>
 </li>
</ul>

Then, reviewing:

The css selector, for the first version where the submenu is nested in the link should be:

a:hover ul{
  display: block;
}

Or it can also be perfectly:

li:hover ul{
  display: block;
}

And in the second case, being sister elements:

a:hover ~ ul{
  display: block;
}

Having clear the bases of the error and the way to solve it, I present the demo with your same code but with the html layout that I recommend and the css selector that should be:

@font-face {
    font-family: FontDance;
    src: url("fonts/dancing.ttf");
}



.ulMenuFirst {
    list-style: none;
}

.TagAMenu {
    text-decoration: none;
    color:black;
}

.TagAMenu:hover {
    text-decoration: none;
    color: white;
}

.liMenuSecond{
    float: left;
height: 50px;
width: 80px;
line-height: 50px;
text-align: center;
background-color: #E8C5C8;
font-family: FontDance;
}

.liMenuSecond:hover{
background-color: #AAE8E2;
}

:nth-child(1):focus{
background-color: #AAE8E2;
}

.subUlSecond {
  list-style: none;
  margin-left: -50%;
  display:none;
}

.liMenuSecond:hover .subUlSecond{
  display: block;
}

<div id="containerMenuFirst" class="col-md-12">
<section id="sectionMenu" class="col-md-6 offset-md-6">


<ul class="ulMenuFirst">
  <li tabindex="0" class="liMenuSecond"><a href="#" class="TagAMenu">Menu 1</a></li>
  <li tabindex="1"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 2</a></li>
  <li tabindex="2"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 3</a></li>
  <li tabindex="3"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 4</a></li>
  <li tabindex="4"  class="liMenuSecond" id="viewMore">
    <a href="#" class="TagAMenu" >
      Ver Mas
    </a>
    <ul class="subUlSecond" id="SubMenuFirst">
        <a href="#" class="TagAMenu"><li class="liMenuSecond">SubMenu 1</li></a>
    </ul>
  </li>
</ul>

</section>
</div>

And finally, if the elements are brothers, but with the error that I explained above:

@font-face {
    font-family: FontDance;
    src: url("fonts/dancing.ttf");
}



.ulMenuFirst {
    list-style: none;
}

.TagAMenu {
    text-decoration: none;
    color:black;
}

.TagAMenu:hover {
    text-decoration: none;
    color: white;
}

.liMenuSecond{
    float: left;
height: 50px;
width: 80px;
line-height: 50px;
text-align: center;
background-color: #E8C5C8;
font-family: FontDance;
}

.liMenuSecond:hover{
background-color: #AAE8E2;
}

:nth-child(1):focus{
background-color: #AAE8E2;
}

.subUlSecond {
  list-style: none;
  margin-left: -50%;
  display:none;
}

.TagAMenu:hover ~ .subUlSecond{
  display: block;
}

<div id="containerMenuFirst" class="col-md-12">
<section id="sectionMenu" class="col-md-6 offset-md-6">


<ul class="ulMenuFirst">
  <li tabindex="0" class="liMenuSecond"><a href="#" class="TagAMenu">Menu 1</a></li>
  <li tabindex="1"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 2</a></li>
  <li tabindex="2"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 3</a></li>
  <li tabindex="3"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 4</a></li>
  <li tabindex="4"  class="liMenuSecond" id="viewMore">
    <a href="#" class="TagAMenu" >
      Ver Mas
    </a>
    <ul class="subUlSecond" id="SubMenuFirst">
        <a href="#" class="TagAMenu"><li class="liMenuSecond">SubMenu 1</li></a>
    </ul>
  </li>
</ul>

</section>
</div>

Any questions do not forget to use the comment box. Successes!

If I have understood correctly, what you want is that when the mouse is positioned in the menu item with the text "See More", the submenu with the text "SubMenu 1" is displayed.

Assuming I am right, the correct way to do it would be the one you have titled as Form 3 .

If it has not worked for you, there must be something else coming into play that causes it. I would say that one of the factors could be the browser with which you are running the application, but being an operation as you said, basic and simple, it seems that the shots do not go around.

My second theory is that it could be due to Bootstrap, that is stepping on your CSS rules with theirs and that this causes you not to obtain the desired effect. You could try adding an important to your display: block :

#viewMore:hover .subUlSecond{
  display:block !important;
}

I tell you all this, because by testing your code I have obtained the effect you are looking for, using the Form 3 , so there is something that is affecting your code that does not mine (you can see my test in link )