html - 如何在索引页面的导航菜单中显示子子菜单选项？

Question

我在下拉选项菜单中使用了许多带有子菜单和子子菜单列表的导航菜单。我已经设置了其他子选项，它们是 category、state 和 city，这三个子选项也都有自己的子选项。

但是它在mousehover 上没有正确显示。它仅显示最后一个菜单列表。

JSFiddle

CSS文件

#topnav{padding:0; color:#333; background-color:#000; clear:both; word-wrap:normal; white-space:nowrap;}
#topnav ul{margin:0; padding:0; list-style:none; text-transform:uppercase; font-size:12px;}
#topnav ul ul{z-index:9999; position:absolute; width:190px; text-transform:none;}
#topnav ul ul ul, #topnav ul ul ul ul{left:190px; top:0;}
#topnav ul:first-child li:last-child > ul{right:0;}
#topnav ul:first-child > li:last-child li > ul{left:-190px;}
#topnav li{position:relative; display:block; float:left; margin:0 30px 0 0; padding:0;}
#topnav li:first-child{}
#topnav ul:first-child li:last-child{margin-right:0;}
#topnav li li{width:100%; margin:0;}
#topnav li a{display:block; padding:20px 0;}
#topnav li li a{display:block; margin:0; padding:10px 15px;}
#topnav ul ul{display:none;}
#topnav ul li:hover > ul{display:block;}
#topnav a{color:#BDCFBD; background-color:#000; font-weight:bold;} 
#topnav li li a, #topnav li.active li a{color:#FFFFFF; background:#000; font-weight:normal;}
#topnav li.active a, #topnav a:hover{color:#fff; background-color:#000;}
#topnav ul li li:hover > a{color:#000; background-color:#fff;}
#topnav li a.drop, #topnav li.active a.drop{padding-left:15px; background-image:url("images/dropdown_side.gif"); background-position:5px center; background-repeat:no-repeat;}
#topnav ul li ul li {
    float: none;
    z-index: 2;
}
#topnav ul li ul {
    position: absolute;
    display: none;
}
#topnav ul li ul :hover ul {
    display: block;
}

/* Top navigation for smaller resolutions */

#topnav form{display:block; height:30px; margin:0 auto; padding:20px 0;}
#topnav form select{display:block; width:100%; padding:8px; color:#FFFFFF; background-color:#000; border:1px solid #494949; cursor:pointer; outline:none;}
#topnav form select option{display:block; margin:10px; padding:0; cursor:pointer; outline:none; border:none;}

html文件

<div >
    <nav id="topnav" >
    <ul class="clear">
    <li class="active"><a href="index.php" title="Home" style="color:F90">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li>
    <li><a class="drop" href="#" title="Purchase">Purchase</a>
        <ul>
            <li><a href="" title="Purchase 1">Purchase 1</a></li>
            <li><a href="" title="Purchase 2">Purchase 2</a></li>
            <li><a href="" title="Purchase 3">Purchase 3</a></li>
        </ul>
      </li>
      <li><a href="" title="user management">user</a>
         <ul>
              <li><a href="user_request_index.php" title="Notification">user Notification</a></li>
              <li><a href="changerights.php" title="Change Rights">Change user Rights</a></li>
              <li><a href="user_profiles.php" title="User Profile">User Profile</a></li>
              <li><a href="addbyadmin.php" title="Add User">Add user</a></li>
              <li><a href="deleteuserform.php" title="Delete User">Delete user</a></li>
              <li><a href="addusertype.php" title="Add User">Add user type</a></li>
              <li><a href="deleteusertype.php" title="Delete User">Delete user type</a></li>
        </ul>
    </li>
    <li><a class="drop" href="#" title="industry/dealer">Dropdown Options </a>
        <ul>
              <li><a href="" title="Category">Category</a></li>
              <ul>
                  <li><a href="" title="Add Category">subCategory</a></li>
                  <li><a href="" title="Edit Category">Edit Category</a></li>
                  <li><a href="" title="Delete Category">Delete Category</a></li>
                  <li><a href="" title="Readd Deleted Category">Readd Deleted Category</a></li> 
              </ul>
              <li><a href="" title="State">State</a></li> 
              <ul>                            
                  <li><a href="" title="Add State">Add State</a></li>
                  <li><a href="" title="Edit State">Edit State</a></li>
                  <li><a href="" title="Delete State">Dlete State</a></li>
                  <li><a href="" title="Readd Deleted State">Readd Deleted State</a></li>
              </ul> 
              <li><a href="" title="City">City</a></li>
              <ul>
                  <li><a href="" title="Add City">Add City</a></li>
                  <li><a href="" title="Edit City">Edit City</a></li>
                  <li><a href="" title="Delete City">Delete City</a></li>
                  <li><a href="" title="Readd Deleted City">Readd Deleted City</a></li> 
              </ul>
        </ul>
    </li>
    </ul>
    </nav>
</div>

Answer 1

您的“li 标签”应该在子“ul 标签”之后关闭

<li><a href="" title="Category">Category</a>
          <ul>
              <li><a href="" title="Add Category">subCategory</a></li>
              <li><a href="" title="Edit Category">Edit Category</a></li>
              <li><a href="" title="Delete Category">Delete Category</a></li>
              <li><a href="" title="Readd Deleted Category">Readd Deleted Category</a>   </li> 
          </ul>
</li>

这是 Fiddle .