Hallo zusammen,
ich habe jetzt schon sehr viel Zeit im Web und hier im Forum verbracht um nach einer Lösung für ein vertikales Menü mit Flyouts zu suchen.
Leider wird bei 99% der Fundstellen mit Javascript gearbeit und gerade dass darf ich nicht verwenden.
Es muß also 100% CSS sein und wenns geht im IE6,IE7,Opera und FF funktionieren.
Ich würde gerne selber eines erstellen und nicht an einem fremden Style sheet (Stu etc. ) rumschnitzen.
Der Hauptgrund liegt darin das ich gerne verstehen würde was da produziert wurde und bei fremden Styles steig ich noch weniger durch wie bei meinen eigenen
. Zudem muss ich das immer weiter ausbauen und wenn ich die Struktur selber (mit hoffentlich Eurer Hilfe) gebaut habe dann weiß ich später auch wo ich schrauben muss.
Zudem habe ich auf der Suche viele Anfrage in anderen Foren gefunden die das gleiche Problem haben, also könnte man dass hier schon als Tuto dann verwenden
Aktueller Stand:
Bin dabei die zweite Ebene (drei sollen es dann endgültig werden) der Navigation reinzubauen, leider fangen hier schon die Probleme an. Der FF zeigt was anderes wie der IE. Gut der IE kann ja kein hover, das Problem muss man dann auch noch angehen. (siehe Anhang)
Der Code sieht momentan so aus:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#navi {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navi ul {
list-style-type: none;
width: 190px;
margin: 0;
padding: 0;
}
#navi li {
position: relative;
float: left;
width: 190px;
margin-bottom: -1px;
border: 1px solid #CCCCCC;
}
#navi li a:link, #navi li a:visited {
display: block;
text-decoration: none;
font-weight: bold;
padding: 5px 5px 5px 0.7em;
border-left: 7px solid #4B74A2;
background-color: #F8F8F0;
color: #4B74A2;
width: 100%;
}
#navi li a:hover, #navi li a:active, #navi li a:focus {
border-left: 7px solid #4B74A2;
background-color: #FEF36D;
color: #4B74A2;
}
#navi li ul {
position: absolute;
display: none;
margin-left: 11.05em;
margin-top: -2.35em;
}
#navi li:hover ul {
left: auto;
}
-->
</style>
</head>
<body>
<div id="navi">
<ul>
<li><a href="#">Taste1 </a></li>
<ul>
<li><a href="#">Ebene2</a></li>
<li><a href="#">Ebene2</a></li>
<li><a href="#">Ebene2</a></li>
</ul>
<li><a href="#">Taste2 </a></li>
<li><a href="#">Taste3 </a></li>
<ul>
<li><a href="#">Ebene2</a></li>
<li><a href="#">Ebene2</a></li>
<li><a href="#">Ebene2</a></li>
</ul>
<li><a href="#">Taste4 </a></li>
<li><a href="#">Taste5 </a></li>
<li><a href="#">Taste6 </a></li>
<li><a href="#">Taste7 </a></li>
</ul>
</div>
</body>
</html>
Also der Flyout liegt im FF direkt unter dem ersten li was ja eigentlich beim hover nach rechts ausbrechen sollte.
Was muss ich hier noch machen damits mal im FF funktioniert?
Danke für Eure Hilfe.
Gruß
gieri
