I am currently working on some client work and I make use of a simple dropdown menu i built. It seems to work fine in most browsers, except for IE. Debugging has been a real pain as IE doesn’t really offer much insight and I haven’t been able to pin point the exact issue.
The dropdown is a div that has position: absolute and contains three <ul>‘s. From what I can tell, the div is positioned alright, but the first ul is twice the width its supposed to be, with no clear reason and thus making it seem like the entire dropwdown is not alligned properly.
The dropdown can be found here: fatumdemo.platonlearning.com. Moving over the menu items in the top menu (blue) you can see the issue.
The code is very lengthy to all post here, but in case more information about the structure and CSS is needed, I’d be glad to post it.
The problem was with the fact that i was using elements other than
li‘s as children of aul. Internet Explorer apparently doesn’t tolerate this behavior, unlike all the other browsers and treats the other elements as list-items, hence my dropdown being put in the wrong list-item in IE.