HTML and CSS Reference
In-Depth Information
Now, the client comes back and says, “I want a drop-down menu to appear
when the user clicks on 'Products.' Give them easy access to each of the
pages!” As a result, our HTML changes.
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a>
<ul>
<li><a href="/products/shoes">Shoes</a></li>
<li><a href="/products/jackets">Jackets</a></li>
</ul>
</li>
<li><a href="/contact">Contact Us</a></li>
</ul>
We now have a list item within a list item, and links within it. Our menu has a
horizontal navigation when the client wants a vertical list, so we add some
rules to style the inner list to match what the client wants.
#nav ul {
margin: 0;
padding:0;
list-style:none;
}
#nav li li {
float: none;
}
#nav li li a {
padding: 2px;
background-color: red;
}
Problem solved! Sort of.
