En primer lugar, debes comenzar conociendo, que la forma de maquetar el menú, es indebida, ya que lo haces anidando los <li>
dentro de los <a>
y debe ser al contrario.
Lo haces así:
<ul>
<a>
<li> </li>
</a>
</ul>
Y debe ser:
<ul>
<li>
<a> </a>
</li>
</ul>
Segundo (después de corregir lo anterior), la lógica detrás de un menú desplegable, vía css como lo estas intentando hacer tú, es de esta manera:
Html:
<ul>
<li>
<a></a>
<ul>
<li>
</a></a>
<li>
</ul>
</li>
</ul>
Y el CSS:
li ul{
display: none;
}
li:hover ul{
display: block;
}
La anterior es la forma más recomendada, ya que el submenú, no se esconderá por error cuando estés sobre este, ya que hace parte del elemento <li>
contenedor y siempre vas a estar sobre este.
La elección del selector ~
es para cuando quieres afectar elementos hermanos y es una variante, que también puede ser útil, pero vas a tener problema para seleccionar opciones del menú porque este esconderá una vez intentes ponerte encima del submenú. Sin embargo a ti no te funciona, porque el elemento que activa la aparición del submenú, no se encuentra al lado del submenú, sino que lo envuelve.
Así lo tienes tú:
<ul>
<li>
<a><!--Este elemento envuelve el submenú-->
<ul>
<li>
</a></a>
<li>
</ul>
</a>
</li>
</ul>
Y debería ser:
<ul>
<li>
<a></a>
<!--Cómo ves el submenú está al mismo nivel del enlace-->
<ul>
<li>
</a></a>
<li>
</ul>
</li>
</ul>
Entonces, repasando:
El selector css, para la primera versión donde el submenu esta anidado en el enlace debería ser:
a:hover ul{
display: block;
}
O también puede perfectamente ser:
li:hover ul{
display: block;
}
Y en el segundo caso, siendo elementos hermanos:
a:hover ~ ul{
display: block;
}
Teniendo claras las bases del error y la forma de solucionarlo, te presento la demo con tu mismo código pero con la maquetación html que te recomiendo y el selector css que debería ser:
@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>
Y por último, si los elementos son hermanos, pero con el error que te explique arriba:
@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>
Cualquier duda no olvides usar la caja de comentarios. Éxitos!