Uden javascript den går ikke hvis det også skal virke i IE6, måske i IE7 det ved jeg ikke. Men hele triket ligger i at der bliver indlæst javascript når stylen body {behavior: url(csshover.htc);} indlæses. Som håndtere hover effekten i IE. Så triket er at gemme filen
http://www.webdesign101.dk/www/cssmenu/dropdownmenu/csshover.htc på din egen server, som så bliver loaded ind når siden indlæses.
Udgangspunktet for dette svar er
http://www.webdesign101.dk/www/cssmenu/dropdownmenu/eks12.htmlSiden her vil virker i FF.
Så skab filen
http://www.webdesign101.dk/www/cssmenu/dropdownmenu/csshover.htc på din egen server
Tilsidst så bruger du den forkerte menu html. Den som der er vist på siden er kun rammen. Mangler en del.
Eks. her vil kun virke i FF med mindre at filen csshover.htc bliver indlæst, så vil det også virke i IE
Håbed det skubber dig den rigtige vej.
<!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="da" lang="da">
<head>
<title>Webdesign 101 Demoside</title>
<base href="
http://www.webdesign101.dk/www/cssmenu/dropdownmenu/" />
<meta name="robots" content="none" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css" media="screen">
html, body {margin:0;padding:0;}
body { background-color:#889; font-family: georgia,serif;padding-bottom:1em;}
body {behavior: url(csshover.htc);}
div#page {
position:relative;
width:45em;
margin: 0 auto;
background:#efefff;
border-width:0 1px;
border-style: solid;
border-color:#000;
}
div#banner h1 {
height:130px;
color:white;
padding-right:15px;
background-image:url(bonneville.jpg);
background-position:left top;
background-repeat:no-repeat;
text-align:right;
margin:0;
border-bottom:1px solid black;
}
div#indhold {
width:32em;
margin-bottom: 0;
margin-left: 16px;
border-right:1px solid black;
padding-bottom:1em;
}
* html #indhold {margin-left:8px;}
div#rightcol {
position:absolute;
width:11em;
font-size:95%;
right:1em;
top:130px;
margin-top:1em;
}
div#rightcol p a {display:block;}
#rightcol h3 {font-size:1em;margin-top:2em;}
div#indhold h2 {padding-top:1em;}
.mumle {color:gray;}
.red {color:#c0;}
/* Navbar styles */
div#navbar {
float:left;
background: #b36747;
width:100%; /* tilføjelse */
border-bottom:1px solid black;/* tilføjelse */
margin:-1px 0 0 0;}
* div#navbar { /* Sætter samme skrift og størrelse på alle elementer i navbar'en */
font-size:80%;font-family:arial,sans-serif;font-weight:bold; }
div#navbar ul { margin:0; padding:0; list-style:none; background: #b36747;
border-top: 1px solid black; }
div#navbar li { position:relative; width:10em; line-height:1em;
margin:0; padding:0; list-style:none; float:left;
border-bottom:none;
border-right:1px solid black; /*z-index:2;*/}
div#navbar li a {
color:#f1d1a8;/* tilføjelse */
}
div#navbar li:hover {
background-image:url(lightbg.png);
background-repeat:repeat;
}
div#navbar li:hover a{
color:black;
}
div#navbar li.sub a {
background-image:url(darrowbrown.png);
background-position:95% center;
background-repeat:no-repeat;
}
div#navbar li.sub li a {
background-image:none;
color:#f1d1a8;/* tilføjelse */}
div#navbar li.sub li a:hover {
background-image:none;
color:black;/* tilføjelse */}
div#navbar li.sub li.sub:hover {
background-image:url(lightbg.png);
background-repeat:repeat; }
div#navbar ul li a { display:block; text-decoration:none;
padding:0.25em 0 0.25em 0.5em; width:9.5em; margin:0;
}
div#navbar>ul a {width:auto;}
div#navbar ul ul {display:none;position:absolute;width:10em;
}
div#navbar ul ul li {border-bottom:1px solid black;
border-left:1px solid black;margin-left:-1px;}
div#navbar li.sub li.sub {
background-image:url(darrowbrown.png);
background-position:right center;
background-repeat:no-repeat;
}
div#navbar ul.niveau1 li.sub:hover ul.niveau2 {border-top:1px solid black;}
div#navbar ul.niveau1 li.sub:hover ul.niveau2,
div#navbar ul.niveau2 li.sub:hover ul.niveau3 {display:block;}
div#navbar ul.niveau2 {top:1.5em; left:0;}
div#navbar ul.niveau3 {top:-1px; left:9em;border-top:1px solid black;}
</style>
</head>
<body>
<div id="page">
<div id="banner">
<h1>CSS dropdown menu eksempel 12</h1>
</div>
<div id="navbar">
<ul class="niveau1">
<li class="sub"><a href="#">Introduktion</a>
<ul class="niveau2">
<li><a href="#">Historie</a></li>
<li><a href="#">Matematikken</a></li>
<li><a href="#">Fysikken</a></li>
<li><a href="#">Rumfart</a></li>
</ul>
</li>
<li class="sub"><a href="#">Indre planeter</a>
<ul class="niveau2">
<li><a href="#">Merkur</a></li>
<li><a href="#">Venus</a></li>
<li><a href="#">Jorden</a></li>
<li class="sub"><a href="#">Mars</a>
<ul class="niveau3">
<li><a href="#">Astronomiske data</a></li>
<li><a href="#">Måner</a></li>
<li><a href="#">Atmosfære</a></li>
<li><a href="#">Topologi</a></li>
</ul>
</li>
</ul></li>
<li><a href="#">Asteroiderne</a></li>
<li class="sub"><a href="#">Ydre planeter</a>
<ul class="niveau2">
<li><a href="#">Jupiter</a></li>
<li><a href="#">Saturn</a></li>
<li><a href="#">Uranus</a></li>
<li><a href="#">Neptun</a></li>
<li><a href="#">Pluto</a></li>
</ul></li>
<li class="sub"><a href="#">Test menu</a>
<ul class="niveau2">
<li><a href="#">Menupkt 1</a></li>
<li><a href="#">Menupkt 2</a></li>
<li><a href="#">Menupkt 3</a></li>
<li><a href="#">Menupkt 4</a></li>
<li><a href="#">Menupkt 5</a></li>
</ul></li>
</ul>
</div>
<div id="indhold">
<div class="mumle">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.</p>
<p>Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. </p>
<p>Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.</p>
</div>
</div>
<div id="rightcol">
<h3>Kviklinks til eksemplerne på CSS dropdown menuer</h3>
<p><a href="eks01.html">Eksempel 1</a>
<a href="eks02.html">Eksempel 2</a>
<a href="eks03.html">Eksempel 3</a></p>
</div>
</div>
</body>
</html>
