I am working on the navigation for a site that has drop down menus. They drop down action works fine, but the mouse over action is limited to when you mouse over the link text. I would like it to be active over the entire list element.

1 answer

The easiest solution would be to set the height/width of the <a> tags in the list and set them to display: block as well. This would "expand" the elastic containing <li> and thus make the entire <li> clickable.

You could improve many of your selectors, too. For example: rather than selecting the level two `<ul>`'s as `ul.dropdown ul`, you could simply select them as `.sub-menu`. This cuts down on file size and also makes your page render faster--not only that but Google takes into account page speed rankings in their searches, a higher page speed score helps you get to the top. — Zack Doherty almost 8 years ago