HTML-CSS-Hover Dropdown-Menü unerwartetes Verhalten

Question

Mein Code soll den Hover-Dropdown-Effekt nur mithilfe von CSS realisieren. Der Übergang zwischen zwei Listen im Menü ist jedoch nicht fließend. Das Menü springt von einem Untermenü zu einem Hauptmenü.

Ich habe mich gefragt, ob es eine Lösung für diesen "springenden" Effekt gibt.

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

ich Ihre HTML geändert, weil direkt in einem <ul> oder <ol> Element, nur <li> Elemente und andere <ul> oder <ol> Elemente aufweisen kann. Alle anderen Tags müssen innerhalb von <li> liegen.

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>