Question

I hope I’m asking this correctly with the right words: I have a very basic CSS drop down menu that highlights (background color) each li as I hover over them. As I hover, I’d like to be able to click on the whole li area to get to the link destination, not have to find the hyperlink sitting in that li to execute the click.

For this discussion, here’s a simplification of my menu:

<div class="catnav">
<ul>
  <li><a href="#">CATEGORY</a>
    <ul>
      <li>Florists</li>
      <li>Caterers</li>
      <li>Formal Wear</li>
      <li>All Categories...</li>
    </ul>
  </li>
</ul>
</div>

…and the CSS:

.catnav ul {list-style:none;margin:0px;padding:0px;}
.catnav li {float:left;text-align:center;position:relative;background:#f5f6f7;padding:0px 10px 0px 10px;}
.catnav li ul li {float:none;width:150px;text-align:left;padding-left:0px 0px 0px 5px;line-height:17px;}
.catnav a {text-decoration:none;color:#548dd4;font-family:arial;}

.catnav li ul {position:absolute;top:21px;left:0px; border:1px solid #ccc;
    -moz-box-shadow: 0px 3px 10px #aaa;
    -webkit-box-shadow: 0px 3px 10px #aaa;
    box-shadow: 0px 3px 10px #aaa;
    visibility:hidden;}
.catnav li:hover ul {visibility:visible;z-index:100;}
.catnav li:hover {background:#e0e0e0;}
.catnav li:hover li a {font-size:0.8em;font-weight:normal;visibility:visible;z-index:100;}

Any help would be great. thanks!

J

Answer 1

try this line of css:

.catnav li ul li a {display:block;width:150px;}

or you could wrap your <li> with the <a> (<a><li></li></a>) but that’s just bad practice..