Hidden <ul> vanishes while hovering between <li> to it

Question

Below I have a hidden <ul> which appears when the <li> 'More' is hovered over.

Due to the margin of the <li> , the <ul> dissapears when hovering between 'Extras' and the <ul> - how do I prevent this from happening?

 #container ul { list-style: none; margin: 0px; padding: 0px; } #container li { color: #fff; width: 80px; height: 60px; float: left; line-height: 60px; margin: 10px; background: black; } #container li a { display: block; } .extras:hover > ul.hidden { display: block; } ul.hidden { display: none; } 

 <div id="container"> <div class="center" style="text-align: center; display: inline-block;"> <nav> <ul class="nav"> <li>Example 1</li> <li>Example 2</li> <li class="extras">More <ul class="hidden"> <li>Hoverable</li> <li>Hoverable</li> <li>Hoverable</li> </ul> </li> <li>Example 3</li> <li>Example 4</li> </ul> </nav> </div> </div> 

Answer 1

Your ul tag is not getting height. Here try this

 #container ul { list-style: none; margin: 0px; padding: 0px; float:left; width:100%; } #container li { color: #fff; width: 80px; height: 60px; float: left; line-height: 60px; margin: 10px; background: black; } #container li a { display: block; } .extras:hover > ul.hidden { display: block; } ul.hidden { display: none; } 

 <div id="container"> <div class="center" style="text-align: center; display: inline-block;"> <nav> <ul class="nav"> <li>Example 1</li> <li>Example 2</li> <li class="extras">More <ul class="hidden"> <li>Hoverable</li> <li>Hoverable</li> <li>Hoverable</li> </ul> </li> <li>Example 3</li> <li>Example 4</li> </ul> </nav> </div> </div> 

Answer 2

Where you use float always remember to set layout of parent.

 #container .center { display: inline-block; vertical-align: top; text-align: center; } #container ul { list-style: none; padding: 0; margin: 0; } #container .nav:after { display: block; content: ''; clear: both; } #container .nav > li { margin: 10px; float: left; } #container ul li { position: relative; line-height: 60px; background: black; cursor: pointer; height: 60px; color: #fff; width: 80px; } #container ul li ul { position: absolute; top: 100%; left: 0; } #container ul ul li { margin-top: 10px; } #container ul li a { display: block; } .extras:hover > ul.hidden { display: block; } ul.hidden { display: none; } 

 <div id="container"> <div class="center"> <nav> <ul class="nav"> <li>Example 1</li> <li>Example 2</li> <li class="extras">More <ul class="hidden"> <li>Hoverable</li> <li>Hoverable</li> <li>Hoverable</li> </ul> </li> <li>Example 3</li> <li>Example 4</li> </ul> </nav> </div> </div>