Ie 6 hover

HTML & CSS
1

Hi Guys,

I have come to realise that IE 6 does not support hover… why am I not suprised?..

So I’m trying to figure out a solution to get my drop down menu to work - but am having a few problems. Maybe someone could please take a look at my code and offer some tips?

Thanks!

/* Navigation */
#navTop {
	position: absolute;
	left: 0px;
	top: 126px;
	height: 38px;
	border-bottom: #eff1f4 1px solid;
	width:950px;
}
ul#nav {
	position: relative;
	height: 42px;
	margin: 0 0 0 55px;
}
ul#nav li {
	display: block;
	float: left;
	position: relative;
}
ul#nav li a {
	display: block;
	float: left;
	padding: 12px 14px 12px 15px;
	font-size: 14px;
	line-height: 14px;
}

ul#nav li a:hover  {
	background-color: #CCC;
}



/* Navigation Link Colors */
ul#nav li a:link,  ul#nav li a:visited {
	color: #8294b0;
	text-decoration: none;
}
ul#nav li a:hover {
	color: #8294b0;
	text-decoration: none;
}
ul#nav li a:active {
	color: #8294b0;
}

ul#nav li ul {
	background: #7f9ac3 url() no-repeat;
	top: 37px;
	left: 15px;
	position: absolute;
	width: 182px;
	padding-top: 2px;
	display: none;
}
ul#nav li:hover ul {
	display: block;
}

ul#nav li ul li {
	border-bottom: 1px solid #fff;
	width: 182px;
}

ul#nav li:last-child {
	border-bottom: none;
}

ul#nav li ul li a {
	display: block;
	width: 158px;
	background: transparent url(../images/subNavBgGrad_08.gif) repeat-y;
	line-height: 16px;
	font-size: 12px;
	padding: 6px 12px;
	color: #fff !important;
	text-align:left;
}
ul#nav li ul li a:hover {
	background: transparent;
	color: #233e67 !important;
}



<div id="navTop">
    <ul id="nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a>
        <ul class="child-nav">
          <li><a href="#" title="">Sub Link 1</a></li>
          <li><a href="#" title="">Sub Link 2</a></li>
        </ul>
      </li>
      <li><a href="#">Link 3</a>
        
      </li>
      <li><a href="#">Sub Link 1</a></li>
      <li><a href="#">Sub Link 2</a>
        
      </li>
      <li><a href="#">Link 4</a>
        <ul class="child-nav">
          <li><a href="#" title="">Sub Link 1</a></li>
          <li><a href="#" title="">Sub Link 2</a></li>
        </ul>
      </li>
    </ul>
  </div>
2

People without JavaScript turned on will not see the drop down menu in IE6. That is the sacrifice you make when using a drop down, considering the IE6 lack of support for hover on anything other than anchor, as others have said. So as Paul O’B pointed out JavaScript can be used to make the drop down work in IE6.

3

Or just add a little JS helper for Ie6 (as in the suckerfish menus).

Here’s a basic example (just view source).

4

IE6 support :hover on anchors as you must have noticed in your own example. If you refer to the drop downs not working you could have a look here

5

Yes, you should provide an alternative method for IE6 users with JS disabled such as making the top level menu item link to a page where the submenus are displayed by default.