2

Estoy empezando a aprender a desarrollar paginas web y tengo un problema con CSS que no logro resolver.

Tengo un submenu que no logro mostrar cuando paso el mouse encima del primer list item del menú

Este es mi código:

<ul>
  <li><a href="bitacora.php">Tickets</a></li>
  <ul>
    <li><a href="ticketnuevo.php">Nuevo Ticket</a></li>
  </ul>
  <li><a href="pingsrv.php">Probar Conexion</a></li>
</ul>

Este es mi CSS, pero quiero definir estos estilos que sean exclusivos del "menu".

ul {
    /*Quita el simbolo de la lista (cuadro, punto, numero)*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #377ADE;
}

li {
    /*hace que las pestañas se alinien hacia la izquierda*/
    float: left;
}

li a {
    display: block;
    /*color del link o texto*/
    color: white;
    text-align: center;
    /*El primero determina el largo, el segundo que tan separados estan*/
    padding: 12px 15px;
    text-decoration: none;
}

/*Cuando se pasa el mouse por envima cambia de color*/
li a:hover {
    background-color: #FF0049;
    text-decoration: underline;
}

/*Esconde el submenu ul */
ul ul {
    display: none;
}

2 respuestas 2

1

Tu menú está mal construido, el segundo ul, o sea el submenú debe ir dentro del li Tickets, es la forma de anidar listas dentro de listas:

<ul>
  <li><a href="bitacora.php">Tickets</a>
    <ul>
      <li><a href="ticketnuevo.php">Nuevo Ticket</a></li>
    </ul>
  </li>
  <li><a href="pingsrv.php">Probar Conexion</a></li>
</ul>

Para mostrar el submenú tienes que cambiar el display del ul al pasar por encima del li Tickets:

li:hover ul {display:block}

Si quieres que los estilos solo se apliquen a este ul en concreto debes identificarlo de alguna forma, con una clase o un id.

Al final quedaría algo así:

#menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #377ADE;
  float: left;
}

#menu li {
  display: inline-block;
  position: relative;
}

#menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 12px 15px;
  text-decoration: none;
}

#menu li:hover a{
  background-color: #FF0049;
  text-decoration: underline;
}

#menu ul {
  display: none;
  list-style-type: none;
  padding: 0;
  position: absolute;
  top: 100%;
  width:400px;
}

#menu li:hover ul {
  display: block;
}
<ul id="menu">
  <li><a href="bitacora.php">Tickets</a>
    <ul>
      <li><a href="ticketnuevo.php">Nuevo Ticket</a></li>
    </ul>
  </li>
  <li><a href="pingsrv.php">Probar Conexion</a></li>
</ul>

He cambiado el hover de los enlaces a los li para que no entrara en conflicto con el efecto de mostrar el submenu y algunos otros ajustes de estilos.

1
  • Excelente muchas gracias, ya entendi el error del diseño del menu, seguire practicando y adaptare tu codigo a mi web, saludos!
    – user5019
    Commented el 3 ago. 2017 a las 20:41
1

prueba con li:hover > ul {display:block;}

te adjunto un ejemplo

https://jsfiddle.net/fzura/r5k789fr/

Saludos

#Menu ul {display:none;}
#Menu { list-style:none;}
#Menu li:hover > ul {display:block;}
<ul id="Menu">
     <li><a href="#">menu 1 </a></li>
     <li><a href="#">menu 2 </a>
          <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
     </li>
     <li><a href="#">menu 3 </a></li>
</ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.