Link inside <li> No work

Question

Pretty simple nut I'm trying to crack. I only do image rollover with CSS. When I connect the href link, it just doesn't work. By not working, I mean that this does not act as a link, and as a result, you cannot go to the page. Assuming this has something to do with <li> , but I can't figure that out. Here are my HTML and CSS:

CSS

  ul.navigation, ul.navigation ul { margin: 25px 0 0 0; } ul.navigation li { list-style-type: none; margin:15px; } .AboutUsNav{ display: block; width: 159px; height: 54px; background: url('../images/N_About_Us.png') bottom; text-indent: -99999px; } .AboutUsNav:hover { background-position: 0 0; } 

HTML

 <div> <ul class="navigation"> <li class="AboutUsNav"><a href="/about">About Phin &amp Phebes Ice Cream</a></li> <li class="FlavorsNav"><a href="/flavors">Ice Cream Flavors</a></li> <li class="WheretoBuyNav"><a href="/buy">Where to Buy Our Ice Cream</a></li> <li class="WholesaleNav"><a href="/wholesale">Wholesale Orders Ice Cream</a></li> <li class="ContactUsNav"><a href="/contact">Contact Phin &amp; Phebes Ice Cream</a></li> <li><a href="http://phinandphebes.com/about">about</a></li> </ul> </div> 

Answer 1

Your .AboutUsNav has text-indent: -99999px; by pulling a outside the viewport.

You probably want to put a negative text-indent on a , and then set a to display: block; width: 100%; height: 100% display: block; width: 100%; height: 100% display: block; width: 100%; height: 100% , depending on your circumstances.

Answer 2

do not apply indent text and background to the list - do it instead of a link.

Example:

 <div id=​"main_nav"> <li class="home"> <a href="/">Home</a> </li> <li class="news"> <a href="/">News</a> </li> </div> 

CSS

 #main_nav a { background-image:url(); } #main_nav .home a { width: 82px; background-position: 0px 0px; } #main_nav .news a { width: 85px; background-position: 82px 0px; } 

Answer 3

Thank you for your help. I tried the approach recommended by you. I think this definitely works under certain circumstances. For me, my background image just didn't appear, but the links worked.

I decided to solve this problem, leaving CSS the same, but changing the HTML markup like this:

 <div> <ul class="navigation"> <li><a class="AboutUsNav" href="/about">About Phin &amp; Phebes Ice Cream</a></li> <li><a class="FlavorsNav" href="/flavors">Phin &amp; Phebes Flavors</a></li> <li><a class="WheretoBuyNav" href="/buy">Where to Buy Phin &amp; Phebes Ice Cream</a></li> <li><a class="WholesaleNav" href="/wholesale">Wholesale Orders Ice Creamf</a></li> <li><a class="ContactUsNav" href="/contact">Contact Phin &amp; Phebes Ice Cream</a></li> </ul> 

I worked on this demo that did not include an unordered list: http://kyleschaeffer.com/best-practices/pure-css-image-hover/