I am working on a 4 level drop down menu and simply can't get my head around this issue (I am new to css so it is very likely that I am missing something obvious here!) The problem is coming up in IE where level 2+ links, which are embedded in an unordered list, are clickable only when the mouse is directly over the text. I would like the entire extent of the list item to be clickable. What's strange though is when a link's text is hovered, the hover property is applied as required.

Here's the stripped down code to illustrate my point:

HTML

    <ul>
        <li><a href="#">Park</a></li>
        <li><a href="#">Zoo</a>
            <ul>
                <li><a href="#">Lion</a></li>
                <li><a href="#">Hippopotamus</a></li>
                <li><a href="#">Antelope</a>
                    <ul>
                        <li><a href="#">Kudu</a></li>
                        <li><a href="#">Sable</a></li>
                        <li><a href="#">Impala</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Museum</a></li>
        <li><a href="#">Library</a></li>
    </ul>

CSS


ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
}
ul li {float: left;}
a {
display: block;
white-space: nowrap;
background: aqua;
padding: 5px 10px;
text-decoration: none;
}
a:hover {background: gold;}
/*--------------------------*/
ul ul {
position: absolute;
border: 1px solid #000;
}
ul ul li {
position: relative;
float: none;
margin: 0;
}
/*--------------------------*/
ul ul ul {
top: 0;
left: 100%;
}

If 'position: relative' is replaced from ul ul li with 'display: inline' then the clickable area expands as required, but this puts the 3rd level menu at the top of the 2nd list.

Is there a simple work around that I'm not seeing here? I would like the list to remain variable width.

2 answers

Mottie 1134
0
points

I'm not sure about the clickable area... I couldn't reproduce what you are talking about because the entire block was clickable for me (at least in Firefox, Chrome and IE8). What browser are you talking about?

To make your list variable width you could try changing this bit of CSS (demo), but honestly I don't know of any list that this looks good

ul ul li {
 position: relative;
 clear: left;
 display: inline;
 margin: 0;
}

For some good examples, because Stu knows far more than I do about CSS, check out this site: CSS Play

Answered over 6 years ago by Mottie
  • IE 7 and 8 are both problematic, every other browser I could think of works just fine. The demo jsFiddle preview looks different from the actual browser output! AHouston over 6 years ago
  • If you aren't looking for a pure CSS solution, you could always use javascript/jQuery to make the <li> element clickable. Mottie over 6 years ago
0
points

I think you need to set the li to display:block, not just the a

Answered over 6 years ago by KeriLynn Engel
  • Thanks for the tip. I tried that but it didn't do anything. Position:relative is somehow messing up the extent of the link. If I remove it, the entire li area is clickable (even without display:block), but level 3 gets stuck at the top of the level 2 list. And it's only in IE7. every other browser is fine. AHouston over 6 years ago