michaelmcgurk
Reputation: 6509
IE6 Issue with CSS Menu hover
This basic menu works perfectly in all modern browsers but is not playing ball in IE6.
Here is the JSDOit example.
And my HTML/CSS code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {margin:0;padding:0}
/* Mega Menu */
#mega {
list-style:none;
}
#mega li {
float:left;
position:relative;
}
#mega li:hover {
border-bottom:0;
margin-top:-7px;
z-index:1;
padding:7px 0 1px;
cursor:pointer
}
#mega a:hover{
cursor:pointer
}
#mega a {
color:#000;
outline:0;
text-decoration:none;
display:block;
line-height:2em;
}
#mega div {
position:absolute;
left:-999em;
margin-top:58px;
margin-left:1px;
width:350px;
border-top:0;
font-weight:400;
text-align:left;
background:#00B8F1;
padding:0 10px 10px;
}
#mega li:hover div {
left:-1px;
top:auto;
}
#mega li.dif:hover div {
left:-221px;
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
position:relative;
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
width:100%;
line-height:1.4;
}
#mega div a:hover,#mega div a:focus,#mega div a:active {
text-decoration:none;
}
#mega div .s1,#mega div .s2,#mega div .s3 {
position:absolute;
width:100%;
height:100%;
}
#mega div .s1 {
background:url(images/rightcorner.png) 100% 0 no-repeat;
top:1px;
right:-9px;
}
#mega div .s2 {
background:url(images/leftcorner.png) 0 100% no-repeat;
bottom:-9px;
left:1px;
}
#mega div .s3 {
background:url(images/shadow.png) 100% 100%;
top:9px;
right:-9px;
}
#mega li:hover .s4 {
background:url(images/li-shadow.png) 100% 0 repeat-y;
position:absolute;
top:0;
right:-9px;
height:100%;
padding:0 8px 0 0;
}
* html #mega li:hover .s4 {
background:none;
}
#mega li:hover .dif-s4 {
padding-bottom:9px;
}
ul#mega li .sub {
top:58px;
left:0;
position:absolute;
float:left;
width:440px!important;
display:none;
padding:20px;
}
li#di div {
background-position:100px 0;
}
#mega li a#delivery-info {
width:102px;
height:59px;
position:relative;
}
#mega li a#delivery-info span {
position:absolute;
width:100%;
height:100%;
}
#mega li:hover a#delivery-info span {
position:absolute;
width:100%;
height:100%;
}
ul#topnav,ul#mega {
float:left;
width:100%;
list-style:none;
font-size:1.1em;
}
ul#topnav li,ul#mega li {
float:left;
position:relative;
z-index:1;
margin:0;
padding:0;
}
ul#topnav li a,ul#mega li a {
float:left;
line-height:1.6em;
}
ul#topnav li:hover a,ul#topnav li a:hover,ul#mega li:hover a,ul#mega li a:hover {
background-position:left bottom;
}
ul#topnav li .row,ul#mega li .row {
clear:both;
float:left;
width:100%;
margin-bottom:10px;
}
ul#topnav li .sub ul,ul#mega li .sub ul {
list-style:none;
width:150px;
float:left;
margin:0;
padding:0;
}
ul#topnav .sub ul li,ul#mega .sub ul li {
width:100%;
color:#fff;
}
</style>
</head>
<body>
<div id="bar" style="height:60px"> </div>
<div id="container">
<div id="middle">
<div id="nav">
<ul id="mega">
<li id="di"><a href="/" id="delivery-info" class="delivery-info" title="Delivery Info"><span></span>Delivery Info</a>
<b class="s4"></b>
<div> <b class="s1"></b><b class="s2"></b><b class="s3"></b><br /><br />
<p><a href="#">Lots of links go here</a></p>
<p><a href="#">Lots of links go here</a></p>
<p><a href="#">Lots of links go here</a></p>
<p><a href="#">Lots of links go here</a></p>
<p><a href="#">Lots of links go here</a></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Can someone point me in the right direction?
I'm sure it's probably something quite straightforward but I can't get my head around it.
Upvotes: 0
Views: 570
Answers (3)
ShibinRagh
Reputation: 6646
Problem ie6 hover function doesnt work "li:hover" which hover function work only on "a" tag
so we are using jQuery "li" hover function , which will support all browsers
<script type="text/javascript">
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
</script>
Please check this demo http://jsfiddle.net/nPdNd/29/
If you have any doubt just reply here
Upvotes: 0
CoffeeRain
Reputation: 4522
I find this an easy JQuery workaround.
HTML...
<div id="theBox" class="hoverable">
<h2>Hover Over Me!</h2>
</div>
Just add the class "hoverable" to all of the tags you want to be hovered over.
CSS...
#theBox {
width:200px;
height:200px;
background:#F1E592;
margin:50px auto;
border:5px solid #540505;
}
#theBox.hovered, #theBox:hover {
width:200px;
height:200px;
background:#540505;
border:margin:50px auto;
border:5px solid #F1E592;
}
JQuery...
$(document).ready(function() {
$('.hoverable').hover(
function() {
$(this).addClass('hovered'); /* On hover add the class 'hovered' and apply the hovered styles */
}, function() {
$(this).removeClass('hovered'); /* On mouseout remove the class 'hovered' and reset the styles */
}
);
});
Upvotes: 1
Kaido
Reputation: 3931
There is a jquery fix here http://www.danvega.org/blog/2008/1/1/CSS-hover-selector
We have to use a similar fix to display transparent pngs. (IE6 with javascript off just isn't going to look pretty any way you look at it.)
Upvotes: 1