Make Custom Bullet Image Part of Clickable Link

auto_freak

New Member
I am trying to code a horizontal navigation menu in CSS with custom bullet images.I can get most things working, but the problem is that the custom bullet image (which is different for each navigation item) is not part of the clickable link.I know I can move the A tag outside of the LI tag, but that is poor coding practice.Does anyone know how I can make the custom bullet image be part of the clickable link? My gut instinct was to make sure of display:block, but then it messes up the horizontal layout.Here is what I've got so far:CSS:\[code\]#navlist { list-style: none; margin: 0; padding: 20px 0 0px 20px;}#navlist ul { margin: 0; padding: 0;}#navlist li { display:inline; background-repeat: no-repeat; background-position: 0 50%; padding: 3px 0 3px 35px; margin: 0 20px 0 .4em;}#navlist li a { text-decoration:none;}#navlist li.contact { background-image: url(img/contact.png);}#navlist li.about { background-image: url(img/about.png);}\[/code\]HTML:\[code\]<ul id="navlist"> <li class="contact"><a href="http://stackoverflow.com/questions/15512258/#">Contact Us</a></li> <li class="about"><a href="http://stackoverflow.com/questions/15512258/#">About Us</a></li></ul>\[/code\]
 
Back
Top