0

このナビゲーションを修正する方法を知っている人はいますか?

最初の「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>
4

1 に答える 1