Having some difficulty with a dropdown menu specifically in IE7. The menu functions correctly in all other browsers, but in IE7 it seems to be misaligned for some reason. Any suggestions or insights would be greatly appreciated. Please refer to the menu code below, along with the computed CSS from Firebug and visual representations of the issue.
Expected Menu
Menu Offset
HTML Code
<ul id="coolMenu">
<li class="">
<a class="donate" href="#">
User Options
<span class="downarrowclass"></span>
</a>
<ul id="style_me" style="display: none;">
<li>
<a href="#">Candidate Panel</a>
</li>
<li>
<a href="#">Access details</a>
</li>
<li>
<a href="#">Personal details</a>
</li>
<li>
<a href="#">History</a>
</li>
<li>
<a href="#">Withdraw application</a>
</li>
<li>
<a href="#">Jobs by e-mail</a>
</li>
<li>
<a href="#">Log off</a>
</li>
</ul>
</li>
</ul>
CSS Code
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
/*float: left;*/
}
#coolMenu li a {
display: block;
text-decoration: none;
color: #ffffff;
width: 100px;
text-align: center;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu li:hover ul {
display: block;
}
.dropdown a li{
color: #124162 !important;
}
#coolMenu li #style_me li a{
color: #124162 !important;
width: 140px !important;
}
#coolMenu li #style_me li a:hover {
color: #ffffff !important;
}
In case it's helpful, there appears to be an offset issue as shown in the IE developer tab:
You can also view the calculated code in iedeveloper for the ul coolmenu.