I'm sure this is the easiest of questions. I have been studying the css of this navigation for hours and I can't seem to figure out how it works. (http://simplebits.com/about/) Dan's done a great job here but I can't quite seem to figure out how he did it. The right sub navigation, what I am trying to do is make it so when you hover anywhere in the list area, it sees it as a link.

The problem is I can only get it to change the background color, and you need to hover over the text to actually make it a link. Could anyone explain how to go about setting something like this up, or is there a tutorial somewhere I can read?

Here is the html followed by the css.

<ul class="subnav">
<li class="active"><a href="pricing.html">General Pricing</a></li>
<li><a href="testimonials.html">Client Testimonials</a></li>
<li><a href="catalog.html">Music Catalog</a></li>
<li class="sub-last"><a href="faq.html">Frequently Asked Questions</a></li>
</ul>

/* Sub Navigation */

.subnav, .subnav li {
width: 100%;
}

.subnav li {
border-bottom: 1px dotted #d5d4d4;
padding: 1em 0 1em 2.5em;
background: url(images/arrow.gif) 6px 17px no-repeat;
width: 100%
}

.subnav a {
color: #b8b8b8;
width: 100%;
}

.subnav a:hover {
color: #947681;
}

li.sub-last {
border: 0;
}

.subnav li:hover{
background: #f3f3f3 url(images/arrow_hover.gif) 6px 17px no-repeat;
}

.subnav li.active {
background: #f3f3f3 url(images/arrow_on.gif) 6px 17px no-repeat;
color: #333;
}

li.sub-last {
border: 0;
}

Any help would be greatly appreciated. Thanks!

James

Hi Nein,

Fairly simple solution - just add display: block; to your .subnav a declaration. It should now read:

.subnav a {
color: #b8b8b8;
width: 100%;
display: block;
}

Hope this helps,

A