css - 标签在悬停时消失

Question

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

任何帮助将不胜感激！

#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 并没有真正消失，它只是向右移动，因为子 ul 不是绝对定位的。

如果你会这样做

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

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

Answer 2

嘿看我想我解决了你的问题。没有javascript，没有jquery。享受。

HTML部分：

<div id="topnav">
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">activities</a></li>
<li><a href="#">about us</a>
<ul>
<li> <a href="#"> What we do </a> </li>
<li> <a href="#">What it costs </a></li>
</ul></li>  
<li><a href="#">contact</a></li>
</ul>
<div class="clear"></div>
</div>

CSS部分：

.clear{clear:both;}

#topnav{width:100%;}

#topnav ul{list-style:none;}

#topnav li{float:left;}

#topnav a{padding-left:10px; padding-right:10px;}

#topnav ul ul{width:200px; height:60px; position:absolute; visibility:hidden;}

#topnav ul ul li{width:50%; height:30px;}

#topnav ul ul a{font-size:13px;}

#topnav ul li:hover ul{visibility:visible;}