Menu
Hi.
I’m kinda new to CSS and I have a bit of a problem
I’ve made a vertical and pop-out menu using ul, li and anchors. something like this
<div>
<ul class=”menu”>
<li><a>text</a></li>
<li><a>text</a>
<ul>
<li><a>text</a></li> <- first popout li
<li><a></a>text</li> <- second popout li
</ul>
</li>
<li><a>text</a></li>
</ul>
</div>
relevant part of the css looks like this
.menu{
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul
{
list-style-type: none;
padding: 0;
margin: 0;
display: none;
position:absolute;
left: 100%;
top:0px;
width:100%;
}
.menu li:hover ul
{
display: block;
}
.menu li
{
position:relative;
}
ok, now to get the popouts displaying in IE over whatever is on the right side of the menu (another div positioned relative), i had to set a z-index of 2 for the containing div,for “.menu”, and for “.menu ul” separately.
Now if i change .menu ul {left:80%) firefox will display everything ok (popout menu overlapping the original one, for each child li, and over whatever is on the right side of the menu), but IE will only display the first popout li overlapping the original menu, the other ones following it will be displayed with the overlapping part UNDER the original menu but all popout li will still be over whatever is on the right side of the menu
firefox
original menu | popout menu | page content to the right of the menu
|__________| A |__A___|
|___| A |__A
IE
original menu | popout menu | page content to the right of the menu
|__________| A |__A___|
|___| B |__A
A = above
B = below
If my explanations of the problem made sense…is there a way to fix this?
Thank you in advance