Question

我在悬停它的父级ul时尝试显示ul时遇到了一个奇怪的问题。当我将鼠标悬停在'about us'上时，'contact 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/

联系人李并没有真正消失它只是向右移动，因为孩子的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;}

<li>标签在悬停时消失</li>

2 个答案: