Question

I have encountered a strange problem when trying to show a ul when hovering it’s parent ul. When I hover over ‘about us’, the ‘contact li’ disappears and then reappears when I hover out. Tested on all browsers and same problem throughout.

Any help would be massively appreciated!

#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

If you look here
http://jsfiddle.net/t3vZ6/

The contact li doesnt realy disapear it just shifts to the right because the child ul isnt positioned absolute.

If you would do it like this

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

it should work..
Hope it helps 🙂