HTML CSS 悬停下拉菜单意外行为

Question

我的代码应该只使用 CSS 来实现悬停下拉效果。但是，菜单中两个列表之间的过渡一点也不流畅。菜单从一个子菜单跳转到一个主菜单。

我想知道这种“跳跃”效应是否有任何解决方案。

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

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>

Answer 2

我更改了您的HTML，因为直接在<ul> 或<ol> 元素内，您只能有<li> 元素和其他<ul> 或<ol> 元素。所有其他标签都需要在<li>'s 内。

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>