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

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>