Just laying out my usual HTML menu structure:
<div id="page">
<h1>Home</h1>
<ul id="nav">
<li><a href="http://example.com/">Home</a>
<ul>
<li><a href="http://example.com/">Nested Item</a></li>
<li><a href="http://example.com/">Nested Item</a></li>
</ul>
</li>
<li><a href="http://example.com/">About Us</a>
<ul>
<li><a href="http://example.com/">Nested Item</a></li>
<li><a href="http://example.com/">Nested Item</a></li>
</ul>
</li>
<li><a href="http://example.com/">Our Products</a>
<ul>
<li><a href="http://example.com/">Nested Item</a></li>
<li><a href="http://example.com/">Nested Item</a></li>
</ul>
</li>
<li><a href="http://example.com/">Contact Us</a>
<ul>
<li><a href="http://example.com/">Nested Item</a></li>
<li><a href="http://example.com/">Nested Item</a></li>
</ul>
</li>
</ul>
<h2>Stuff</h2>
<p>
Random stuff.</p>
<p>
Some random text.</p>
</div>
Take a peek at the menu css:
#nav, #nav ul{
padding: 0;
margin: 0;
list-style: none;
}
#nav a{
display: block;
border:1px solid cyan;
}
#nav li {
border:1px solid;
float: left;
}
#nav li ul {
/* Hides sub-items while keeping them available to screen readers - important note! Never use display: none; as it removes sub-items entirely. */
position:absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
I'm curious about that last CSS rule:
#nav li:hover ul {
left: auto;
}
How exactly does "left:auto" normalize the negative position of "left:-999em" and create a seamless drop down effect?
Here's an example.