0

このフィドルを修正したいのですが、うまく機能していないことがわかります。このナビゲーションを水平方向に、サブメニューを垂直方向に、サブメニューのサブメニューを水平方向に作成したいのですが、これにもトランジションを使用しましたが、正しく機能していません。最初のサブメニューはスムーズにドロップしませんが、スムーズにロールアウトし、3 番目のメニューはスムーズなロールアウトのように機能しません。これを解決したいのですが、これを理解する方法を教えてください。これがフィドルです。すべてのコードにはこれが含まれています。 http://jsfiddle.net/hsn0/nQneb/

CSS

#nav {
height: auto;
width: auto;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
 }
 #nav ul li a:hover {
background-color: #0C3;
 }
 #nav ul li ul {
position: absolute;
visibility: hidden;
-webkit-transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
transition: all 1s linear 0s;
overflow: hidden;
height: 0px;
 }
 #nav ul li:hover ul {
height: 100px;
visibility: visible;
overflow: visible;
 }
 #nav ul li ul li {
-ms-transition: all 1s;
-o-transition: all 1s;
 }
 #nav ul li ul li a {
background-color: #666;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
 }
 #nav ul li ul li a:hover {
background-color: #C30;
 }
 #nav ul li ul li ul {
position: absolute;
left: 102px;
top: 0px;
display: none;
-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;
overflow: hidden;
visibility: hidden;
width: 0px;
 }
 #nav ul li ul li ul li {
float: left;
position: relative;
 }
 #nav ul li ul li:hover ul {
width: 104px;
display: block;
/* [disabled]overflow: visible; */
visibility: visible;
 }

 **html**

<nav id="nav">
 <ul>
   <li><a href="#">Item1</a>
 <ul>
   <li><a href="#">Sub1</a></li>
  <li><a href="#">Sub1</a></li>
   <li><a href="#">Sub1</a>
     <ul>
 <li><a href="#">Sub2</a></li>
        <li><a href="#">Sub2</a></li>
        <li><a href="#">Sub2</a></li>
     </ul>

    </li>
   </ul>
  </li>
 </ul>
</nav>
4

2 に答える 2

0

このデモをチェックしてください

大きな問題は可視性とオーバーフローによるものだと思いますが、不透明度と高さを移行できます。

これにはいくつかのメニュー部分を使用しました...高さで試しましたが、すべてでも機能します。

#nav ul li ul {
    position: absolute; 
    -webkit-transition: height  1s linear 0s;
    -moz-transition: height  1s linear 0s;
    -ms-transition: height  1s linear 0s;
    -o-transition: height  1s linear 0s;
    transition: height 1s linear 0s;    
    height: 0px;
    overflow:hidden;
}
#nav ul li:hover ul {
    height: 100px;

        -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
}
于 2013-07-30T18:10:19.853 に答える