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

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。