Show hidden submenu

Question

Show hidden submenu

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I am starting to learn to develop web pages and I have a problem with CSS that I can not solve.

I have a submenu that I can not show when I mouse over the first list item of the menu

This is my code:

<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>

This is my CSS, but I want to define these styles that are unique to the "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;
}

html5 css

asked by EduardoVelazquez 03.08.2017 в 20:53

source

2 answers

0

test with li:hover > ul {display:block;}

I attached an example

link

Greetings

#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>

answered by 03.08.2017 в 21:18

Linebreaks django and html java.lang.IllegalStateException: Attempt to mutate in notification (JDateChooser, JAVA)

score 2 · Accepted Answer

Your menu is poorly constructed, the second ul , or the submenu must go within the li Tickets, is the way to nest lists within lists:

<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>

To show the submenu you have to change the display of the ul when passing over the li Tickets:

li:hover ul {display:block}

If you want the styles to apply only to this particular ul you must identify it in some way, with a class or an id.

In the end it would be something like this:

#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>

I have changed the hover of the links to the li so that it does not conflict with the effect of displaying the submenu and some other style settings.