Databases
StackOverflow2013
Postsdbo
POCSS dropdown menu: how do I click on the whole li:hover, not just the hyperlink in it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS dropdown menu: how do I click on the whole li:hover, not just the hyperlink in it?
    text
    copied!<p>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.</p> <p>For this discussion, here's a simplification of my menu:</p> <pre><code>&lt;div class="catnav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;CATEGORY&lt;/a&gt; &lt;ul&gt; &lt;li&gt;Florists&lt;/li&gt; &lt;li&gt;Caterers&lt;/li&gt; &lt;li&gt;Formal Wear&lt;/li&gt; &lt;li&gt;All Categories...&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>...and the CSS:</p> <pre><code>.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;} </code></pre> <p>Any help would be great. thanks!</p> <p>J</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload