CSSの奇妙な振る舞い：オーバーフローとマージン左

Question

私はサイトのメニューに素敵なトランジションを作ろうとしています。ユーザーが親アイテムの上を移動すると、子供たちは滑り落ち、マウスが離れると元に戻ります。しかし、彼らはこのfiddleに見られるように、そうではありません。それから、私はここで助けを求めて、overflow: hidden;のアプローチを使用し、heightを移行することだけを指摘しました。はい。基本的にはそう

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 180px; 
 
} 
 

 
#menu ul ul { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu ul li { 
 
    position: relative; 
 
} 
 

 
#menu ul ul li { 
 
    height: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 

 
#menu ul li:hover>ul>li { 
 
    height: 32px; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li>Parent Item 
 
     <ul> 
 
     <li>Child Item</li> 
 
     <li>Child Item &gt; 
 
      <ul> 
 
      <li>Child Child Item 1</li> 
 
      <li>Child Child Item 2</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

「子子アイテム1」と「子子アイテム2」の項目は、ユーザーには見えない：以下のコード例で見られるように、しかし、それは私の子供の項目の子項目を隠しました。マウスを動かすとスライドを上下に動かす/両方の子アイテムを表示して表示するにはどうすればよいですか？それは純粋なCSSで行うことができますか？

Answer 1

あなたは、私がtransition効果に不透明度を含めていないopacity 1に注意を変更、:hoverに0

のheightに加えて、0にliの初期opacityを設定することができます。私はそれがすぐに変わるほうが良いかもしれないと思う。代わりにopacityを使用しての

を更新

、私は0に初期font-sizeを設定し、スムーズな効果が得られますスケールアップと思います。わかりやすくするために、トリガーとメニューにクラスを追加しました。

* { 
 
    cursor: pointer; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 180px; 
 
} 
 

 
#menu ul ul { 
 
    position: absolute; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu ul li { 
 
    position: relative; 
 
} 
 

 
.dropdown-one li, 
 
.dropdown-two li { 
 
    height: 0; 
 
    font-size: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 

 
.dropdown-trigger-one:hover .dropdown-one>li, 
 
.dropdown-trigger-two:hover .dropdown-two>li { 
 
    height: 32px; 
 
    font-size: 1em; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li class="dropdown-trigger-one">Parent Item 
 
     <ul class="dropdown-one"> 
 
     <li>Child Item</li> 
 
     <li class="dropdown-trigger-two">Child Item &gt; 
 
      <ul class="dropdown-two"> 
 
      <li>Child Child Item 1</li> 
 
      <li>Child Child Item 2</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>