このナビゲーションを修正する方法を知っている人はいますか?
最初の「item1」、「Menu1」の「Menu2」は完全に機能していますが、右側の2番目のitem1では、最初のメニューのように「Menu2」が正しく機能していません。
これを修正するには?
#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>