Problem mit horizontal Hover Menü im IE8

Mathe

Grünschnabel
Hallo!

Ich habe mir eine kleine Navigationsleiste gebaut, mit nem Hover Effekt, dass er das Menü nach unten ausklappt. Das klappt soweit auch, außer im IE. Habe bei mir den IE8 installiert und das Menü wird nicht nach unten aufgeklappt, sonder einfach neben dem Link. Hoffe es weiß jemand warum. Hier mein Code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <title>Navigation</title>
                <style type="text/css">
                 #menu {margin:10px; padding: 0 0 20px 10px; border-bottom: 1px solid #900; position: relative;}
                 #menu ul, #menu li {margin: 0; padding: 0; display: inline; list-style-type: none;}
                 #menu a:link, #menu a:visited {line-height: 14px; font-family: 'Arial', sans-serif; margin: 0 10px 4px 10px; color: #999;}
                 #menu a:link#current, #menu a:visited#current, #menu a:hover {padding-bottom: 2px; background: transparent; color: #000;}
                 #menu a:hover { color: #900;}
                 #menu a { color: #000; text-decoration: none; }
                 #menu ul ul { position: absolute;}
                 #menu ul ul ul { position: absolute; top: 0; left: 100%; }
                 div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul{display: none;}
                 div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}

                 </style>
                 <!--[if lt IE 7]>
                 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
                 <![endif]-->


        <base target="hauptseite">
        </head>
        <body>
                <div id="menu">
                        <ul>
                                <li><a href="mainpage.html">Home</a></li>
                                <li><a href="angebote.html">Angebote ></a>
                                         <ul>
                                                 <li><a href="tonsets.html">Tonsets</a></li>
                                                 <li><a href="lichtsets.html">Lichtsets</a></li>
                                         </ul>
                                </li>
                                <li><a href="geraete.html">Geräte ></a>
                                         <ul>
                                                 <li><a href="boxen.html">Boxen</a></li>
                                                 <li><a href="verstaerker.html">Verstärker</a></li>
                                                 <li><a href="mischpulte.html">Mischpulte</a></li>
                                                 <li><a href="licht.html">Lichtequipment</a></li>
                                                 <li><a href="mikrofone.html">Mikrofone</a></li>
                                                 <li><a href="zubehoer.html">Zubehör</a></li>
                                         </ul>
                                </li>
                                <li><a href="referenzen.html">Referenzen</a></li>
                                <li><a href="kontakt.php">Kontakt</a></li>
                                <li><a href="impressum.html">Impressum</a></li>
                        </ul>
                </div>
        </body>
</html>
 
Hi,

die IE-Familie (6 - 8) erwartet neben deiner position:absolute-Regel für die erste Submenüebene, auch eine Angabe zu ihrer Startposition.

CSS:
#menu ul ul { position: absolute; top: 16px; left: 10px; }

mfg Maik
 
Zurück