Cómo ocultar subpestañas del menú al pasar cursor

  • Autor Autor bola6
  • Fecha de inicio Fecha de inicio
bola6

bola6

Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Buenas, resulta que estaba probando un par de cosas y decidí agregar unas subpestañas (o como se llamen) en mi menú, y lo que ocurre es que esas subpestañas están visibles en todo momento, cuando lo que me gustaría sería que al poner el cursor encima de la pestaña principal, me muestre las pestañas secundarias.

Aquí una captura:
Dibujo.webp

(Como podéis ver, la pestaña "Películas" tiene 3 subpestañas, y estas siempre están visibles.)


Con este código muestro el menú:
PHP:
<nav id="top-menu" role="navigation" class="clearfix">
<?php wp_nav_menu( array('theme_location' => 'MenuPrincipal', 'container' => 'false' )); ?>		
</nav>

CSS:
Insertar CODE, HTML o PHP:
.navigation {
margin:0px 0px 0 0px;clear:both;font-weight:normal;padding-top:30px;
}
nav#top-menu{
    display:inline-block;background: url(images/pie-mn.png);
    border: 1px solid #002232;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 1px #EDF9FF inset;
    height: 42px;
    list-style: none outside none;
    margin: 10px auto 0;
    padding: 0 20px;
    width: 940px;
}
nav#top-menu .menu{
    margin: 0 auto;height: 40px;width: 915px;
}
nav#top-menu li  {
    border: medium none;
    display: block;
    float: left;
    margin-right: 30px;
    margin-top: 7px;
    padding: 4px 10px;
    position: relative;
    text-align: center;
}
nav#top-menu li:hover {
    background:#F4F4F4;
    border: 1px solid #777777;
    border-radius: 5px 5px 0 0;
    padding: 4px 9px;
}
nav#top-menu li a {
    color: #EEEEEE;
    display: block;
    font-size: 14px;
    outline: 0 none;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
nav#top-menu li:hover a {
    color: #161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

Creo que me falta algún ul o li, pero no estoy seguro. ¿Alguien me ayuda?

Muchas gracias!
 
PHP:
wp_nav_menu()

El solito agrega las clases, solo escribe algo así:

Insertar CODE, HTML o PHP:
ul.menu ul.sub-menu {
  display: none;
}

ul.menu li:hover > ul {
  display: block;
}

Así solo se muestran en el hover de la lista.

Viendo el tuyo seria algo así el selector:

Insertar CODE, HTML o PHP:
nav#top-menu li:hover ul {
  display: none;
}

nav#top-menu li:hover {
  display: block;
}
 
Última edición:
Gracias por la información!
 
Atrás
Arriba