CSS上的子菜单悬停菜单问题

Question

I want to make a code where I hover my mouse through the menu items, and appears a submenu with a list ...

Here's my html nav code on CSS first and then the HTML code ...:

 nav { background-color: #FFF; width: 960px; margin: 0 auto; } div.ajuste { clear: both; } nav ul { width: 95%; margin: 5px 5px 0 5px; padding: 10px 10px 10px 6px; height: 40px; line-height: 100%; background: #FFF; /* position:relative; z-index:999; overflow: hidden;*/ float:left; list-style-type: none; } nav li { margin-bottom: 10px; padding-right: 25px; float: left; /*position: relative;*/ /*list-style: none;*/ } nav a { color: #36E; font-weight: bold; text-decoration: none; /*margin-right: 6%;*/ font-family: arial, sans-serif; font-style: normal; font-size: 15px; text-decoration: none; display: block; padding: 6px 20px 6px 20px; /*margin-bottom: 10px;*/ } nav a:hover { color: #0505B4; } nav a.active { color: #1414D3; } ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0; } ul.dropdown { position: relative; z-index: 597; float: left; } ul.dropdown li { float: left; min-height: 1px; line-height: 1.3em; vertical-align: middle; } ul.dropdown li.hover, ul.dropdown li:hover { position: relative; z-index: 599; } ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } ul.dropdown ul li { float: none; } ul.dropdown ul ul { top: 1px; left: 99%; } ul.dropdown li:hover > ul { visibility: visible; } 

  <nav> <ul id="menu_bar" class="dropdown"> <li><a href="#" class="active">Inicio</a></li> <li><a href="#">Biografía</a></li> <li class="submenu"><a href="#">Discografía</a></li> <ul> <li><a href="#">Innerspeaker</a></li> <li><a href="#">Lorenism</a></li> <li><a href="#">Currents</a></li> </ul> </li> </ul> <div class="ajuste"> <nav> 

My fail occurs when I hover it ... List submenu don't appears... What's bad on my code?

Answer 1

The second UL, need to be inside the LI tag.

 nav { background-color: #FFF; width: 960px; margin: 0 auto; } div.ajuste { clear: both; } nav ul { width: 95%; margin: 5px 5px 0 5px; padding: 10px 10px 10px 6px; height: 40px; line-height: 100%; background: #FFF; /* position:relative; z-index:999; overflow: hidden;*/ float:left; list-style-type: none; } nav li { margin-bottom: 10px; padding-right: 25px; float: left; /*position: relative;*/ /*list-style: none;*/ } nav a { color: #36E; font-weight: bold; text-decoration: none; /*margin-right: 6%;*/ font-family: arial, sans-serif; font-style: normal; font-size: 15px; text-decoration: none; display: block; padding: 6px 20px 6px 20px; /*margin-bottom: 10px;*/ } nav a:hover { color: #0505B4; } nav a.active { color: #1414D3; } ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0; } ul.dropdown { position: relative; z-index: 597; float: left; } ul.dropdown li { float: left; min-height: 1px; line-height: 1.3em; vertical-align: middle; } ul.dropdown li.hover, ul.dropdown li:hover { position: relative; z-index: 599; } ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } ul.dropdown ul li { float: none; } ul.dropdown ul ul { top: 1px; left: 99%; } ul.dropdown li:hover > ul { visibility: visible; } 

  <nav> <ul id="menu_bar" class="dropdown"> <li><a href="#" class="active">Inicio</a></li> <li><a href="#">Biografía</a></li> <li class="submenu"> <a href="#">Discografía</a> <ul> <li><a href="#">Innerspeaker</a></li> <li><a href="#">Lorenism</a></li> <li><a href="#">Currents</a></li> </ul> </li> </ul> <nav> 

Answer 2

You have an extra li tag. Get rid of it, and it should work

<nav>
    <ul id="menu_bar" class="dropdown">
        <li><a href="#" class="active">Inicio</a>

        </li>
        <li><a href="#">Biografía</a>

        </li>
        <li class="submenu"><a href="#">Discografía</a>

            <ul>
                <li><a href="#">Innerspeaker</a>

                </li>
                <li><a href="#">Lorenism</a>

                </li>
                <li><a href="#">Currents</a>

                </li>
            </ul>
        </li>
    </ul>
    <div class="ajuste">
        <nav>