[Solved] ul li:hover > ul – An IE Headache

[kaizer1v]

I am facing problems with IE using the css drop down menu. When I open it in IE, it directly shows the sub-menu opened and is all over the page. It doesn’t work as it should (i.e. the sub-menu should show on hover) This is not the case with Firefox or Chrome. I think it is the ul.menu li:hover > ul that is giving the problem in IE. I have pasted the code below that I am using. Any ideas how to solve this thing with IE?

Here is the code.
The HTML is as below.

<!-- Navigation Menu -->

<ul class="menu">

<li><a href="#"> Home </a></li>

<li><a href="#"> About Us </a>

<ul class="sub-menu">

<li><a href="#"> News </a></li>

<li><a href="#"> Media </a></li>

<li><a href="#"> Events </a></li>

</ul>

</li>

<li><a href="#"> Gallery </a>

<ul class="sub-menu">

<li><a href="#"> Wedding </a></li>

<li><a href="#"> Birthday </a></li>

<li><a href="#"> Christening </a></li>

<li><a href="#"> Seasonal </a></li>

<li><a href="#"> Other </a></li>

</ul>

</li>

<li><a href="#"> Flavours </a>

<ul class="sub-menu">

<li><a href="#"> Cake and Cookies </a></li>

<li><a href="#"> Cup Cakes </a></li>

</ul>

</li>

<li><a href="#"> Portions </a></li>

<li><a href="#"> Prices & Packaging </a></li>

<li><a href="#"> Ordering </a></li>

<li><a href="#"> Contact Us </a></li>

<li><a href="#"> Testimonials </a></li>

</ul>

<!-- End of Navigation Menu .menu -->

The CSS is as below.

ul.menu

{

background: #2379ab;

/*width: 980px;*/

width: auto;

margin: 0 auto;

list-style: none;

color: #FFF;

font-size: 0.88em;

}

ul.menu li

{

background:url(../images/menu-bg.gif) repeat-x bottom;

padding: 25px 10px 25px 10px;

float: left;

display: block;

}

ul.menu li:hover

{

background: #3399ff;

}

ul.menu li a

{

text-decoration: none;

color: #FFF;

}



ul.menu ul.sub-menu

{

visibility: collapse;

background:url(../images/sub-menu-bg.gif) repeat-x bottom;

position: absolute;

/*width: 350px;*/

width: 150px;

border-left: 1px solid #b8cdd9;

border-right: 1px solid #b8cdd9;

border-bottom: 1px solid #b8cdd9;

top: 239px;

padding: 0px;

margin: 0px;

font-size: 0.88em;

margin-left: -10px;

}

ul.menu ul.exceptional-sub-menu /* For the last sub menu that will go beyond page */

{

visibility: collapse;

background:url(../images/sub-menu-bg.gif) repeat-x bottom;

position: absolute;

width: 350px;

border-left: 1px solid #b8cdd9;

border-right: 1px solid #b8cdd9;

border-bottom: 1px solid #b8cdd9;

top: 68px;

padding: 0px;

margin: 0px;

font-size: 0.88em;

margin-left: -270px;

}

ul.menu ul li:hover

{

background: none;

}

ul.menu ul li a:hover

{

color: #032136;

}

ul.menu ul li

{

background: none;

margin-left: 0;

margin-right: 0;

padding-left: 10px;

width: 150px;

padding-bottom: 10px;

padding-top: 10px;

}

ul.menu ul li a

{

display: inline-block;

height: inherit;

color: #2275af;

}

ul.menu li:hover > ul

{

visibility: visible;

}



ul.menu ul.sub-menu ul.desc li

{

padding: 0px;

}

ul.desc

{

padding: 0;

margin: 0;

color: #666;

}

ul.exceptional-desc

{

color: #666;

margin-left: -10px;

padding: 0;

margin-top: 0;

}

[jamygolden]

This tutorial should cover that.

[kaizer1v]

Thanks Jamy.. Although I was looking for a css/html solution without using jquery. I did find a link. Any of you having the same problem and wanting a html/css solution, have a look at http://www.alistapart.com/articles/horizdropdowns/

[jamygolden]

Hey Kaizer, the tutorial has a CSS fallback (It works if javascript is disabled). So if you ignore the jQuery part it should be what you were looking for.

[Author]

Posts