Internet Explorer og :hover
Hej allesammen.Jeg har lavet mig en simpel dropdownmenu, som virker ganske glimrende. :)
Men der er altid problemer med de forskellige browser standarder. Denne gang er det så IE der ikke virker.
Understøtter IE ikke :hover tag'et i CSS?
Kig evt. på nedenstående kode og se om I kan se hvad jeg kan gøre for at få det til at virke.
<!-- Min HTML fil :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Dropdown Test</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div class="dropdown">css dropdown
<ul>
<li><a href="http://www.google.dk" target="ramme">Google</a></li>
<li><a href="http://www.jubii.dk" target="ramme">Jubii</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
</ul>
</div>
<div class="dropdown">css dropdown 2
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
</ul>
</div>
Tekst for at vise gennemsigtighed.
<br />
<iframe id="ramme" name="ramme" style="width:640px;height:480px;border:solid 1px #000000;position:absolute;top:5px;left:250px;" />
</body>
</html>
<!-- Min CSS fil :
.dropdown
{
position: relative;
height: 16px;
width: 142px;
margin: 10px;
padding: 5px 0 4px 8px;
background: url("images/dropmenu.png") bottom right no-repeat;
color: #333;
font-size: small;
font-family: georgia;
}
.dropdown:hover ul
{
display: block;
}
.dropdown ul
{
display: none;
position: absolute;
z-index: 3;
top: 25px;
left: 5px;
margin: 0;
padding: 0 0 3px 0;
list-style: none;
background: url("images/dropmenubgbottom.png") bottom no-repeat;
}
.dropdown ul li
{
width: 150px;
margin: 0;
padding: 3px 0 0 0;
background: url("images/dropmenubgtop.png") no-repeat;
}
.dropdown ul li + li
{
width: 150px;
margin: 0;
padding: 0;
background: transparent;
}
.dropdown ul li a
{
display: block;
margin: 0;
padding: 5px;
background: url("images/dropmenubg.png") repeat-y;
color: #234;
font-size: small;
text-decoration: none;
}
.dropdown ul li a:hover
{
background: url("images/dropmenubgover.png") repeat-y;
}
Håber I kan hjælpe.
Mvh.
