0

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

user1349089
  • 127
  • 6
  • 15

2 Answers2

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..

kingkode
  • 2,220
  • 18
  • 28
  • thanks man, this worked. I also took the left pad out of the li ul li and added it to the anchor. works perfect. J – user1349089 Sep 25 '12 at 19:28
0

Found the same question asked on here with some good answers. The quick answer is use display:block; and then add your padding to that, but the answers in the other thread should explain everything for you.

Community
  • 1
  • 1
Jason
  • 3,330
  • 1
  • 33
  • 38