Check out the fiddle and code snippet here: http://jsfiddle.net/ogr27cLa/4/
<div>
<ul id="navigation">
<a href="http://www.google.com"><li>
<p>one</p>
<ul>
<a href="http://www.bing.com"><li>
<p>one</p>
</li></a>
<a href="#"><li>
<p>two</p>
</li></a>
...
...
...
</ul>
</li></a>
<li>
<p>four</p>
<ul>
<a href="#"><li>
<p>one</p>
</li></a>
<a href="#"><li>
<p>two</p>
</li></a>
...
...
...
</ul>
</li>
<a href="#"><li>
<p>five</p>
</li></a>
<a href="#"><li>
<p>six</p>
</li></a>
</ul>
/* CSS styling */
html, body, ul, li, p, div {
margin: 0;
padding: 0;
}
div {
width: 100%;
background: #00f;
}
ul#navigation {
margin: auto;
list-style-type: none;
position: relative;
font-size: 0;
height: 30px;
width: 957px;
line-height: 30px;
}
...
...
...
</style>
Questioning why ul#navigation>a li is used to style un-nested nav buttons and ul#navigation>li is used for nested ones?