css - <li> 标签在悬停时消失

Question

当悬停它的父 ul 时尝试显示 ul 时，我遇到了一个奇怪的问题。当我将鼠标悬停在“关于我们”上时，“联系方式”会消失，然后在我悬停时重新出现。在所有浏览器上进行了测试，并且始终存在相同的问题。

任何帮助将不胜感激!

#topNav ul li:hover ul {
display: inline-block;
}

#topNav ul li {
display:inline;
list-style-type:none;
padding-right:15px; 
color:#FFF;
}


#topNav ul li ul a {
color:#FFF; 
}

#navHover {
display:none;
position:relative;
top:40px;
left:40px;
width:275px;
height:18px;
background-color:#913f93;
color:white;
text-align:center;
border-bottom-right-radius:.5em;
border-bottom-left-radius:.5em;
}

#navHover li {
margin-left:7px; 
}

<nav id="topNav" class="georgia">

    <ul>
        <li><a href="home.php"> </a> </li>
      <li> <a href="/creations/activities/">activities</a></li>

         <li id="aboutUsLink"><a href="/creations/about-us/">about us</a>

            <ul id="navHover">

              <li> <a href="whatwedo"> What we do </a> </li>
              <li> <a href="what-it-costs">What it costs </a></li>

            </ul>   

        </li>  


          <li><a href="/blog/">contact</a></li>


    </ul>

Answer 1

如果你看这里 http://jsfiddle.net/t3vZ6/

联系人 li 并没有真正消失，它只是向右移动，因为 child ul 不是绝对定位的。

如果你愿意这样做

#topNav ul li:hover ul {
display: inline-block;
position: absolute;
}

它应该工作.. 希望对您有所帮助:)