#menu {
height:25px;
margin:5px;
}
#menu ul, #menu ul ul, #menu ul ul ul, #menu ul ul ul ul {
list-style:none;
}
#menu ul li, #menu ul ul li, #menu ul ul ul li, #menu ul ul ul ul li {
height:23px;
float:left;
background-image:url('images/menu_border.png');
background-repeat:no-repeat;
padding:2px 6px 0 16px;
color:#33588a;
font-weight:bold;
display:block;
}
#menu ul li:hover, #menu ul ul li:hover, #menu ul ul ul li:hover, #menu ul ul ul ul li:hover {
background-image:url('images/menu_border_hover.png');
background-repeat:no-repeat;
}
</style>
What does not work is the hover, it does work in firefox, am I doing it wrong?
I did not try it, but did you see anything wrong in the css code I posted?, I could just go and grab another one like yours but I am learning and if I don´t find the errors in whatever I do then I will just be copying ans pasting which I don´t want.
It’s hard to tell without the html. The code is not as efficient as it could be, but if it works in FF, then it can’t be too faulty. Perhaps if you set actual background positions that would help IE, but I’m not sure. A better way to make an image switch on hover is to merge both images in one image (called a “sprite”) which means there’s no delay on hover. (The background position is moved on hover, so that a different part of the image come into view.)
It would be much easier to see what’s going on here if you could provide a live link.
I see Ralph pretty well answered as I would. I seldom look at problematic css without the html, because the styles mean little if there’s no marked up content to apply it against. It’s kinda like asking if 5 gallons is enough to paint the house without letting me know anything about the house.
You haven’t showed us the doctype you are using which could be the issue. If you have a missing doctype or an ancient doctype then IE will be in quirks mode and revert to the same capabilities as IE5 which menas no hover on elements except anchors among other bad things.
Therefore make sure you have a full and current doctype.
In the code you posted above the hover is working fine in IE7+ except that you are using invalid code to create new lines as breaks cannot be placed between the list items.
Those breaks are in no-mans-land and are invalid and need to be removed. As the list items are floated just clear them to start a new line and apply margins to make space if needed.
/*
Root elements START
*/
#menu {
height:25px;
margin:5px;
}
#menu ul {
list-style:none;
}
#menu ul li {
height:23px;
width:50px;
float:left;
background-image:url('../images/menu_border.png');
background-repeat:no-repeat;
padding:2px 6px 0 16px;
color:#33588a;
font-weight:bold;
}
#menu ul li:hover {
background-image:url('../images/menu_border_hover.png');
}
/*
Root elements END
Child elements level 1 START
*/
#menu ul ul li {
color:#33588a;
font-weight:bold;
position:relative;
left:-2000px;
z-index:1;
border:solid 2px brown;
border-top:none;
background-image:none;
background:beige;
}
#menu ul ul li:first-child {
border-top:solid 2px brown;
}
#menu ul li:hover ul li {
left:-560%;
}
#menu ul li:hover ul li:hover {
background-image:none;
}
.tlak_last_li li {
border-top:solid 2px brown;
}
#menu ul li li{clear:left}
/*
Child elements level 1 END
*/
I did not know I should not use line brake between li so I did use your option for the clear:left property, could this be done better by modifying / adding or removing anything?
You should make the dropdown position:absolute so that it doesn’t interfere with the page. and then move it off left with a large margin and then return it by removing the margin. The parent list is set to position:relative to provide an accurate stacking context.
The menu will now work in IE7 as yours wasn’t.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type='text/css' media='all'>
/*
Root elements START
*/
#menu {
height:25px;
margin:5px;
}
#menu ul {
list-style:none;
margin:0;padding:0;
}
#menu ul li {
height:23px;
width:50px;
float:left;
background-image:url('../images/menu_border.png');
background-repeat:no-repeat;
padding:2px 6px 0 16px;
color:#33588a;
font-weight:bold;
position:relative;
}
#menu ul li:hover {
background-image:url('../images/menu_border_hover.png');
}
/*
Root elements END
Child elements level 1 START
*/
#menu ul ul{
position:absolute;
left:0;
top:25px;
margin-left:-999em;
z-index:1;
}
#menu ul ul li {
color:#33588a;
font-weight:bold;
border:solid 2px brown;
border-top:none;
background-image:none;
background:beige;
}
#menu ul ul li:first-child {
border-top:solid 2px brown;
}
#menu ul li:hover ul {
margin-left:0;
}
#menu ul li:hover ul li:hover {
background-image:none;
}
.tlak_last_li li {
border-top:solid 2px brown;
}
#menu ul li li {
clear:left
}
/*
Child elements level 1 END
*/
</style>
</head>
<body>
<div id="menu" >
<ul>
<li>one
<ul>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</li>
<li>two
<ul>
<li>two</li>
<li>two</li>
<li>two</li>
</ul>
</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
some text
</body>
However, rather than re-inventing the wheel you may be interested in Jason’s menu which is debugged already and nicely working in all browsers.