HTML CSSホバードロップダウンメニューの予期しない動作

Question

私のコードは、CSSのみを使用してホバードロップダウンエフェクトを実現することになっています。しかし、メニュー内の2つのリストの間の遷移は全く流暢ではありません。メニューはあるサブメニューからメインメニューにジャンプします。

この「ジャンプ」効果があるかどうかは疑問でした。

body { 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #B3000000;//f1f1f1; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 80px; 
 
    cursor: pointer; 
 
} 
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 0 8px 16px; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 
/* Change the link color on hover */ 
 

 
ul li a:hover { 
 
    background-color: #000; 
 
    color: white; 
 
} 
 
ul li ul.dropdown { 
 
    width: 200px; 
 
    background-color: #B3000000;//f1f1f1; 
 
    display: none; 
 
    position: relative; 
 
    right: 0; 
 
    top: 0%; 
 
} 
 
ul li:hover ul.dropdown { 
 
    display: block; 
 
    /* Display the dropdown */ 
 
} 
 
ul li ul.dropdown li { 
 
    display: block; 
 
}

<ul> 
 
    <div class="dropdown"> 
 
    <li><a href="#about">About &#9662;</a> 
 
     <ul class="dropdown"> 
 
     <li><a href="#">Staff</a> 
 
     </li> 
 
     <li><a href="#">History</a> 
 
     </li> 
 
     <li><a href="#">Our Mission</a> 
 
     </li> 
 

 
     </ul> 
 
    </li> 
 
    <li><a href="#Contact">Contact</a> 
 
     <ul class="dropdown"> 
 
     <li><a href="#">Employee Contacts</a> 
 
     </li> 
 
     <li><a href="#">Corporate Contacts</a> 
 
     </li> 
 
     <li><a href="#">Join Our Team</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 
    </div> 
 
</ul>

Answer 1

直接<ul>または<ol>要素の内側に、あなただけ<li>要素及びその他の<ul>または<ol>の要素を持つことができるので、私はあなたのHTMLを変更しました。他のタグはすべて<li>の内部にある必要があります。

nav { 
 
    display:inline-block; 
 
} 
 
.nav ul { 
 
    *zoom:1; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    
 
} 
 
.nav ul:before,.nav ul:after { 
 
    content:""; 
 
    display:table; 
 
} 
 
.nav ul:after { 
 
    clear:both; 
 
} 
 
.nav ul > li { 
 
    position:relative; 
 
} 
 
.nav a { 
 
    display:block; 
 
    padding:10px 20px; 
 
    line-height:1.2em; 
 
    color:#000; 
 
    text-decoration:none; 
 
} 
 
.nav a:hover { 
 
    text-decoration:none; 
 
    background:#000; 
 
    color:#fff; 
 
} 
 

 
.nav li ul li { 
 
    width:200px; 
 
} 
 
.nav li ul a { 
 
    border:none; 
 
} 
 
.nav li ul a:hover { 
 
    background:#000; 
 
    color:#fff; 
 
} 
 
.nav li ul { 
 
    position:relative; 
 
    left:0; 
 
    z-index:1; 
 
} 
 
.nav li ul li { 
 
    overflow:hidden; 
 
    height:0; 
 
    -webkit-transition:height 500ms ease-in; 
 
    -moz-transition:height 500ms ease-in; 
 
    -o-transition:height 500ms ease-in; 
 
    transition:height 500ms ease-in; 
 
} 
 
.nav ul > li:hover ul li { 
 
    height:36px; 
 
}

<nav class="nav"> 
 
    <ul> 
 
     <li> 
 
      <a href="#">About &#9662;</a> 
 
      <ul> 
 
       <li><a href="#">Staff</a></li> 
 
       <li><a href="#">History</a></li> 
 
       <li><a href="#">Our Mission</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact</a> 
 
      <ul> 
 
       <li><a href="#">Employee Contacts</a></li> 
 
       <li><a href="#">Corporate Contacts</a></li> 
 
       <li><a href="#">Join Our Team</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

Answer 2

body {https://m.facebook.com/story.php?story_fbid=10153683429737621&substory_index=0&id=178395412620 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #B3000000;//f1f1f1; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 80px; 
 
    cursor: pointer; 
 
} 
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 0 8px 16px; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 
/* Change the link color on hover */ 
 

 
ul li a:hover { 
 
    background-color: #000; 
 
    color: white; 
 
} 
 
ul li ul.dropdown { 
 
    width: 200px; 
 
    background-color: #B3000000;//f1f1f1; 
 
    display: none; 
 
    position: relative; 
 
    right: 0; 
 
    top: 0%; 
 
} 
 
ul li:hover ul.dropdown { 
 
    display: block; 
 
    /* Display the dropdown */ 
 
} 
 
ul li ul.dropdown li { 
 
    display: block; 
 
}

<ul> 
 
    <div class="dropdown"> 
 
    <li><a href="#about">About &#9662;</a> 
 
     <ul class="dropdown"> 
 
     <li><a href="#">Staff</a> 
 
     </li> 
 
     <li><a href="#">History</a> 
 
     </li> 
 
     <li><a href="#">Our Mission</a> 
 
     </li> 
 

 
     </ul> 
 
    </li> 
 
    <li><a href="#Contact">Contact</a> 
 
     <ul class="dropdown"> 
 
     <li><a href="#">Employee Contacts</a> 
 
     </li> 
 
     <li><a href="#">Corporate Contacts</a> 
 
     </li> 
 
     <li><a href="#">Join Our Team</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 
    </div> 
 
</ul>

nav { 
 
    display:inline-block; 
 
} 
 
.nav ul { 
 
    *zoom:1; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    
 
} 
 
.nav ul:before,.nav ul:after { 
 
    content:""; 
 
    display:table; 
 
} 
 
.nav ul:after { 
 
    clear:both; 
 
} 
 
.nav ul > li { 
 
    position:relative; 
 
} 
 
.nav a { 
 
    display:block; 
 
    padding:10px 20px; 
 
    line-height:1.2em; 
 
    color:#000; 
 
    text-decoration:none; 
 
} 
 
.nav a:hover { 
 
    text-decoration:none; 
 
    background:#000; 
 
    color:#fff; 
 
} 
 

 
.nav li ul li { 
 
    width:200px; 
 
} 
 
.nav li ul a { 
 
    border:none; 
 
} 
 
.nav li ul a:hover { 
 
    background:#000; 
 
    color:#fff; 
 
} 
 
.nav li ul { 
 
    position:relative; 
 
    left:0; 
 
    z-index:1; 
 
} 
 
.nav li ul li { 
 
    overflow:hidden; 
 
    height:0; 
 
    -webkit-transition:height 500ms ease-in; 
 
    -moz-transition:height 500ms ease-in; 
 
    -o-transition:height 500ms ease-in; 
 
    transition:height 500ms ease-in; 
 
} 
 
.nav ul > li:hover ul li { 
 
    height:36px; 
 
}

<nav class="nav"> 
 
    <ul> 
 
     <li> 
 
      <a href="#">About &#9662;</a> 
 
      <ul> 
 
       <li><a href="#">Staff</a></li> 
 
       <li><a href="#">History</a></li> 
 
       <li><a href="#">Our Mission</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact</a> 
 
      <ul> 
 
       <li><a href="#">Employee Contacts</a></li> 
 
       <li><a href="#">Corporate Contacts</a></li> 
 
       <li><a href="#">Join Our Team</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>