I'm having trouble with my code for a menu with drop-downs in ie8. It works fine in all other browsers but there seems to be an issue with the positioning of the main menu and submenus. Any thoughts on what might be causing this?
<ul id="nav" class="nav_wrapper">
<li id="menu_3">
<a href="#"> A </a>
<ul class="sub_menu" id="sub_3" style="display: none">
<li id="menu_5"><a href="main.php?pages=5"> 1 </a></li>
<li id="menu_6"><a href="main.php?pages=6"> 2 </a></li>
<li id="menu_7"><a href="main.php?pages=7"> 3 </a></li>
</ul>
</li>
<li id="menu_18"><a href="main.php?pages=18"> B </a></li>
<li id="menu_19">
<a href="#"> C </a>
<ul class="sub_menu" id="sub_19" style="display: none">
<li id="menu_20"><a href="main.php?pages=20"> 1 </a></li>
<li id="menu_21"><a href="main.php?pages=21"> 2 </a></li>
</ul>
</li>
</ul>
Here is the stylesheet I am using. I have removed some unnecessary styles like background and border to simplify:
.nav_wrapper {
left: 0px;
margin-top: 7px;
padding: 0px;
position: fixed;
right: 0px;
Z-index:10;}
#nav > li {
display: inline;
float: right;
position: relative;}
li {
font-family: "tahoma";
font-size: 10pt;
list-style: none outside none;
}
li a {
float: right;
padding: 18px 15px 20px;
text-decoration: none;
}
.sub_menu {
float: right;
line-height: normal;
margin-left: -60px;
margin-top: 55px;
padding: 0px;
position: fixed;
width: 202px;
}
.sub_menu li {
display: inline-block;
text-align: right;
}
.sub_menu li a {
direction: rtl;
display: inline-block;
line-height: 1;
padding: 10px 10px 10px 0px;
width: 192px;
}
The issue I'm facing in ie8 is that the main menu appears cascading from right to left and the submenus are not aligned correctly under the main menu items.