Yay success!
<div id="main-menu-container">
<ul id="main-menu">
<li>
<a href="#">Main menu</a>
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
<a href="#">Main menu</a>
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
<a href="#">Main menu</a>
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
<a href="#">Main menu</a>
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0;
to .sub-menu
just so it stretches from end to end, you can change this to your own preference of course.