IE absolute positioning ul wont show :(

[slothy]

Hi all

IE has stumped me once again.

Using Jquery i am trying to create a (simple 2-tier) dropdown menu. The following works fine in FF and Chrome but in IE the submenu does not get displayed. Can anyone explain to me why and suggest a workaround or even tell me what i am doing wrong? Posted it here coz obviously a CSS issue.


I have a ul with constituent lis. On a hover i want a submenu (ul) to be displayed to the right of the li that was hovered over. IN IE nothing gets displayed.
(The display of menus is toggled on hover)


(Relevant) CSS

<style>
#splitmenu {
width : 186px;

}
#menu {
width : 158px;
display: none;
}

#menu ul {
list-style-type:none;
padding : 0px;
margin-top : 2px;

}
#menu ul li {
cursor : pointer;
padding : 8px 4px;
position : relative;

}
#menu ul li.hovered {
background : #DDDDDD;
}
#rerun {
border-right: 0px;
}
.ui-buttonset .ui-button {
margin-left:0;
margin-right:-0.3em;
}

li.submenuli div.arrow {
position : absolute;
right : 4px;
top : 0px;
background : url(images/arrow.gif) no-repeat;
width : 4px;
height : 7px;
margin-top : 12px;
}
li.submenuli .submenu {
display : none;
position : absolute;
top : 0px;
left :160px;
width : 158px;

}

(relevant HTML)

<div id="splitmenu">
<div>
<button id="rerun">DropDown Menu</button>
<button id="select">Select an action</button>
</div>
<div id="menu" class =" ui-widget-content ui-widget ui-widget ui-corner-all">
<ul id="menu-ul">
<li>Close Menu</li>
<li class ="submenuli" id="menu_summary">Show Summary<div class="arrow"></div>
<ul class ="submenu ui-widget-content ui-widget ui-widget ui-corner-all">
<li>Show Questions</li>
<li>New Question</li>
<li>Show Pointers</li>
</ul>
</li>
<li>Show Questions</li>
<li>New Question</li>
<li>Show Pointers</li>
<li>Index</li>
<li>Previous Chapter</li>
<li>Next Chapter</li>
</ul>
</div>
</div>

IN FF and chrome the submenu (absolute positioned ul in relatively positioned li top 0px left ul width + 2) gets displayed on hover. In IE it doesnt show at all - might flicker.


Thanx in advance

[Stomme poes]

Posted it here coz obviously a CSS issue.

Obviously not, since I don't see a single instance of :hover in your code at all. Why are you using a huge Javascript library for a CSS-able simple two-level dropdown menu?

But anyway if that's all your menu code, then of course the Javascript must be screwing up because you seem to be relying on Javascript to make the submenus appear. You're also using display: none on the subs which is bad accessibility practice (as is relying on Javascript to make a menu pop out in the first place... yes I've read brothercake's arguments and no I don't agree with them one bit).

Best practice: make a CSS-based drop-down menu that works (also for keyboard) and then layer some JS on top of it for things like clicking-to remove (you have a <li>Close Menu</li> which makes no sense: if hover triggers it to open, why do I need to click a list item to close it? and of course anyone not viewing the CSS will wonder what the heck kind of list item "close menu" is. It does not belong in the list, so if Javascript is supposed to close it, make Javascript add it in).

Example of a dropdown menu that's mouse and keyboardable: view source
The CSS for the menu starts at #menu. The subs are pulled off-screen with -pixels (so keyboards can bring them onscreen) and Javascript adds some things:
-makes the whole submenu stay onscreen when a user is keyboarding through the submenu options (without Javascript the best you can do is show the current focussed option plus this doesn't work at all on IE6 or 7 cause they're retarded when it comes to :focus)
-gives a slight mouse-off delay for the shakey-hand/crappy-mouse crowd (no delay onmouseover because menus should be responsive in opening).

Though even though you say "hover" you might also be thinking of a click menu? That indeed needs Javascript to do anything, but you can still take a hover menu and make Javascript let only clicking work on buttons or something. Javascript should be building those buttons then, though: people without Javascript should not see buttons that don't work. Similarly, some people no matter what can't get dropdowns to work: your main header items all need to always go somewhere where the user can still get to the same pages as the submenu items (think touch phone users, they can't hover), OR have a "Sitemap" link which can take users to a page with all your links, in logical order like your dropdown has.

[GottaGoMedia]

I have the same problem. I don't use any jquery though. Mine is pure CSS. Doesn't show in IE at all. Will probably work on that today. I'll post what I can, if anything.

[Stomme poes]

GottaGo: post your HTML and your CSS, and/or a link if possible... dropdown menus are often a source of trouble for people so we're used to debugging them : )

Though I usually still end up sending people to htmlDog for how to do a GOOD basic drodown menu.