javascript - css 上的子菜单悬停菜单问题

Question

我想编写一个代码，将鼠标悬停在菜单项上，然后出现一个带有列表的子菜单 ...

这是我的 html 首先是 CSS 上的导航代码，然后是 HTML 代码......:

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>

当我悬停它时，我的失败发生了……列表子菜单没有出现…… 我的代码有什么问题？

Answer 1

第二个UL，需要在LI标签内。

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>