Equivalent li:hover in IE

[d40sithui]

Hey Guys,
I'm rather new to CSS. I'm playing around with the son of suckerfish menu system. Got it working, sorta. I was trying to make a hover affect, so when the pointer is over an li, that portion will be highlighted with a diff color.
i managed to accomplish that with the code below, however it does not wokr in IE. any suggestions?

li.horizontal:hover{
background: #cccccc;
}

[penders]

*I thought* that worked OK on IE7...? Unfortunately, that does not work in IE6. IE6 only supports the :hover pseudo class on anchors.

The son of suckerfish menu uses JavaScript (for the sole benefit of IE) to imitate the :hover pseudo class by applying a function to the onmouseover and onmouseout events.

[Marshall]

d40sithui,

If you have an <a. element in the <li>, you have to set the <a> to display: block. Below are two CSS for a horizontal and vertical navigation. Pay attention though, while they look similar, there are subtle differences. Hope it helps.

HORIZONTAL

#top_nav_bar {
width: 900px;
height: 50px;
margin: 5px 0;
padding: 0;
font-size: 15px;
line-height: 50px;
color: #FFF;
text-align: center;
background-color: #FFF;
}
ul#top_nav {
width: 900px;
margin: 0;
padding: 0;
list-style-type: none;
}
ul#top_nav li {
font-size: 15px;
line-height: 50px;
text-align: center;
display: block;
float: left;
}
ul#top_nav li a, ul#top_nav li a:visited {
width: 149px;
height: 50px;
margin-left: 1px;
color: #FFF;
text-decoration: none;
background-color: #EC0034;
display: block;
}
ul#top_nav li a:hover {
color: #FFF;
background-color: #F8B208;
}

VERTICAL

#left_nav {
width: 296px;
height: 100%;
margin: 0;
padding: 0;
font-size: 15px;
line-height: 70px;
color: #FFF;
text-align: center;
vertical-align: middle;
background-color: #FFF;
float: left;
}
#left_nav ul {
width: 296px;
margin: 0;
padding: 0;
list-style-type: none;
}
#left_nav ul li {
font-size: 15px;
line-height: 70px;
text-align: center;
display: inline;
}
#left_nav ul li a, #top_nav ul li a:visited {
width: 296px;
height: 70px;
margin: 2px 0;
color: #FFF;
text-decoration: none;
background-color: #55006A;
display: block;
}
#left_nav ul li a:hover {
color: #FFF;
background-color: #A068B0;
}

Marshall

[d40sithui]

ok thank s. this works gr8