css - ホバーするとタグが消える

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/

子 ul が絶対的に配置されていないため、連絡先 li は実際には消えません。右にシフトするだけです。

こんな風にしたら

#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;}