li:hover menü
-
Hallo
Ich stehe vor folgendem Problem: Seit ca einer Woche versuche ich ein lauffähiges Menü hin zu bekommen(ja viel zu lange ich weiss), und mitlerweile bin ich so weit das es eigentlich auch zu Funktionieren schien... Dachte ich mir zumindest bis ich auf die Idee kam es nicht nur in Opera und FF zu Testen sondern auch einmal im IE. Dies führte dazu das der li:hover Effekt auf einmal nicht mehr funktionierte. Der Effekt :hover funktionierte weiter ohne Probleme bei Links aber im Menü ging garnichts.Hier mal der code wenn auch ziemlich unübersichtlich
(wird noch aufgeräumt werden)
HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>sechead</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="../scripts/formate.css"> <link rel="stylesheet" type="text/css" href="header/dropcss.css"> </head> <body id="headbody"> <!-- Durch Table mit Background logo im Header--> <div style="margin-top:178px;" width="728px"> <ul class="drop"> <li id="navihome"><a href="index.php"> </a></li> <li class="empty"> </li> <li id="naviueberuns"><a href="ueberuns.php"> </a></li> <li class="empty"> </li> <li id="naviprodukte"> <ul> <li class="submenu"><a href="magisoft.php"> </a></li> <li class="submenu" style="position:absolute; top:197px; left:266px;"><a href="imagine.php"> </a></li> </ul> </li> <li class="empty"> </li> <li id="naviangebot"><a href="angebot.php"> </a></li> <li class="empty2" > </li> <li id="navikunden"><a href="kunden.php"> </a></li> <li class="empty2"> </li> <li id="naviteam"><a href="team.php"> </a></li> <li class="empty2"> </li> <li id="navinews"><a href="news.php"> </a></li> <li class="empty"> </li> <li id="navileer"> </li> <li id="navikontakt"><a href="#"> </a></li> </ul> <!--<img src="images/navigationsleiste.png" alt="navigation" style="margin-left:-2px;" border="0" >--> </div> </body> </html>Hier noch das CSS File dazu:
.submenu { display:none; width:72px; } li:hover .submenu { display:inline; float:left; border-width:0px; border-style:solid; border-color:black; background-color:blue; margin-left:-40px; padding-bottom:0px; margin-top:6px; } ul.drop { margin-left:0px; margin-top:0px; /*position: absolute; top: 159px; left: 204px; */ width:721px; border:0px solid black; height:24px; padding-left:0px; /*z-index:105;*/ padding-bottom:0px; } li { width:72px; list-style-type:none; display:inline; float:left; text-align:left; height:25px; } li#navihome:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/home_an.png'); } li#naviueberuns:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/ueber_uns_an.png'); } li#naviprodukte:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/produkte_an.png'); } li#naviangebot:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/angebot_an.png'); } li#navikunden:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/kunden_an.png'); } li#naviteam:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/team_an.png'); width:66px; } #naviteam { width:66px; } li#navinews:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/news_an.png'); width:66px; } #navinews { width:66px; } #navileer { width:124px; } li#navikontakt:hover { border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/kontakt_an.png'); } li ul { clear:float; } #tableofhead { position: absolute; top: 0px; left: 200px; border-color:#333333; border-style:solid; border-width:0; z-index:105; height:201px; width:728px; background-image:url('../images/navigationsleiste.png'); background-repeat:none; } .empty { width:5px; } .empty2 { width:0px; }O.k das ist jetzt ein kleines chaos aber ich hoffe ihr könnt mich trozdem erleuchten
Mfg Ride
-
welcher IE?
-
im IE 8
-
http://tjkdesign.com/test/ie8/links.asp
oder
http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml:hover ist beim IE immer buggy und wird es wohl auch immer sein
-
Mal 'ne Frage:
Ride schrieb:
<!-- ... --> <li id="navihome"><a href="index.php"> </a></li> <!-- ... -->Was zum Henker!?
-
heini schrieb:
Mal 'ne Frage:
Ride schrieb:
<!-- ... --> <li id="navihome"><a href="index.php"> </a></li> <!-- ... -->Was zum Henker!?
ist das mit FrontPage zusammen geklickt? ^^
.. werde es mir mal genauer anschauen wenn ich später zeit finde. Außer es löst schon jemand
-
Nein keine Angst so schlimm ist es dan doch nocht nicht
Hab ich abgeändert das mit der Leerzeichen.
Hab es jetzt so gemacht das ich die ID's auf die "a" tags beziehe.
Damit funktioniert es jetzt sogar im Internet Explorer.
Nur was jetzt noch nicht funktioniert ist mein untermenü. Dies wird im IE bis jetzt einfach noch nicht angezeigt.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>sechead</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="../scripts/formate.css"> <link rel="stylesheet" type="text/css" href="header/dropcss.css"> </head> <body id="headbody"> <!-- Durch Table mit Background logo im Header--> <div style="margin-top:178px;" width="728px"> <ul class="drop"> <li style="width:72px;"><a id="navihome" href="index.php"><img src="images/navigation/72x25.png" border="0"></a></li> <!--<li class="empty"> </li>--> <li style="width:72px;"><a id="naviueberuns" href="ueberuns.php"><img src="images/navigation/72x25.png" border="0"></a></li> <!--<li class="empty"> </li>--> <li style="width:78px; line-height:1em; height:27px;"><a id="naviprodukte" href="#"><img src="images/navigation/78x25.png" border="0"> <ul> <li class="submenu1" style="position:absolute; top:198px; left:183px;"> <a href="magisoft.php"><img src="images/navigation/magisoft_inaktiv.png" border="0"></a></li> <li class="submenu2" style="position:absolute; top:198px; left:261px;"> <a href="imagine.php"><img src="images/navigation/imagine_inaktiv.png" border="0"></a></li> </ul></a> </li> <!--<li class="empty"> </li>--> <li style="width:85px;"><a id="naviangebot" href="angebot.php"><img src="images/navigation/85x25.png" border="0"></a></li> <!--<li class="empty2" > </li>--> <li style="width:70px;"><a id="navikunden" href="kunden.php"><img src="images/navigation/70x25.png" border="0"></a></li> <!--<li class="empty2"> </li>--> <li style="width:66px;"><a id="naviteam" href="team.php" ><img src="images/navigation/66x25.png" border="0"></a></li> <!--<li class="empty2"> </li>--> <li style="width:66px;"><a id="navinews" href="news.php"><img src="images/navigation/66x25.png" border="0"></a></li> <!--<li class="empty"> </li>--> <li id="navileer"> </li> <li ><a id="navikontakt" href="#"><img src="images/navigation/72x25.png" border="0"></a></li> </ul> <!--<img src="images/navigationsleiste.png" alt="navigation" style="margin-left:-2px;" border="0" >--> </div> </body> </html>.submenu1 { display:none; width:72px; } .submenu2 { display:none; width:72px; } li:hover .submenu1 { display:inline; float:left; border-width:0px; border-style:solid; border-color:black; background-color:blue; margin-left:-40px; padding-bottom:0px; margin-top:6px; } li:hover .submenu2 { display:inline; float:left; border-width:0px; border-style:solid; border-color:black; background-color:blue; margin-left:-40px; padding-bottom:0px; margin-top:6px; } ul.drop { margin-left:0px; margin-top:0px; /*position: absolute; top: 159px; left: 204px; */ width:721px; border:0px solid black; height:25px; padding-left:0px; /*z-index:105;*/ padding-bottom:0px; } li { /*width:72px;*/ list-style-type:none; display:inline; float:left; text-align:left; height:24px; } li a#navihome:hover { position:absolute; top:178px; left:0px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/home_an.png'); width:72px; height:25px; } li a#naviueberuns:hover { position:absolute; top:178px; left:72px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/ueber_uns_an.png'); width:72px; height:25px; } li a#naviprodukte:hover { position:absolute; top:178px; left:144px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/produkte_an.png'); width:78px; height:25px; } li a#naviangebot:hover { position:absolute; top:178px; left:222px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/angebot_an.png'); width:85px; height:25px; } li a#navikunden:hover { position:absolute; top:178px; left:307px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/kunden_an.png'); width:70px; height:25px; } li a#naviteam:hover { position:absolute; top:178px; left:377px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/team_an.png'); width:66px; height:25px; } #naviteam { width:66px; } li a#navinews:hover { position:absolute; top:178px; left:443px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/news_an.png'); width:66px; height:25px; } #navinews { width:66px; } #navileer { width:124px; } li a#navikontakt:hover { position:absolute; top:178px; left:633px; border-width:0px; border-style:solid; border-color:black; background:url('../images/navigation/kontakt_an.png'); height:25px; width:72px; } li ul { clear:float; } #tableofhead { position: absolute; top: 0px; left: 200px; border-color:#333333; border-style:solid; border-width:0; z-index:105; height:201px; width:728px; background-image:url('../images/navigationsleiste.png'); background-repeat:none; } .empty { width:5px; } .empty2 { width:0px; }
