css - 如何修复这个导航？

Question

有人知道如何修复此导航吗？

你可以看到第一个“item1”，在“Menu1”中，“Menu2”工作得很好，但在第二个右侧的第 1 项“菜单 2”无法正常工作，因为它应该像第一个菜单上的那样。

如何解决这个问题？

      #nav {
width: auto;
height: auto;
position: absolute;
left: 136px;
top: 45px;
  }
   #nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
  }
  #nav ul li {
float: left;
  }
  #nav ul li a {
display: block;
width: 100px;
height: 30px;
text-decoration: none;
line-height: 30px;
text-align: center;
background-color: #0CF;
color: #FFF;
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
transition: all 1s ease 0s;
border: thin solid #666;
    }
    #nav ul li a:hover {
background-color: #0C3;
     }
    #nav ul li ul {
height: 0px;
width: 102px;
z-index: 0;
overflow: hidden;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
visibility: hidden;
top: 31px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #666;
    }
    #nav ul li ul li {
/* [disabled]overflow: hidden; */
    }
    #nav ul li:hover ul {
height: 127px;
visibility: visible;
    }
    #nav ul li ul li a {
display: block;
color: #FFF;
position: relative;
bottom: auto;
background-color: #999;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
border-top-color: #666;
border-bottom-color: #ccc;
border-right-color: #333;
border-left-color: #333;
    }
    #nav ul li ul li a:hover {
background-color: #666;
color: #0C3;
    }
    #nav ul li ul li ul {
position: absolute;
left: 102px;
top: 128px;
visibility: hidden;
overflow: hidden;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
width: 0px;
height: 0px;
    }
    #nav ul li ul li:hover ul {
visibility: visible;
width: 102px;
    }

html

<nav id="nav">
 <ul>
   <li><a href="#">Item1</a>
    <ul>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 1</a>
     <ul>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li> 
         </ul>       
       </li> 
     </ul>
   </li>
 </ul>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 1</a>
     <ul>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 2</a></li> 
      </ul>       
     </li> 
    </ul>
   </li>
 </ul>

</nav>

Answer 1

我想这就是您要找的:http://jsfiddle.net/u8z4r/1/

第二个子菜单在鼠标悬停时在其按钮右侧打开。您应该开始使用 css 类来区分元素。第二个子下拉菜单我有 .left-menu 类，并将下拉菜单向左移动了 102px。

<ul class="left-menu">
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 2</a></li> 
</ul>   

和:

#nav ul li ul li .left-menu {
    left: 204px;
}