Hallo,
ich habe hier eine Navigationsleiste(Optimiert für Opera, für Optimierung auf IE sorg ich nocht später), bei der CSS-basiert eine Unternavileiste ausklappt.
Eines macht mir aber Rätsel:
Schauts euch am besten selber an, was passiert, wenn man über "bsp1" bzw. "bsp2" fährt.
Hier der Navileistencode:
<ul id="navi">
<li id="eins"><span>bsp1</span>
<ul id="weg">
<li><a href="a.htm">dada</a></li>
<li><a href="b.htm">Newsletter</a></li>
<li><a href="c.htm">Stundenplan erstellen</a></li>
</ul>
</li>
<li id="zwei"><span>Navigation für diese Seite</span>
<ul id="weg1">
<li><a href="d.htm">d</a></li>
<li><a href="e.htm">e</a></li>
<li><a href="f.htm">f</a></li>
<li><a href="g.htm">g</a></li>
<li><a href="h.htm">h</a></li>
<li><a href="i.htm">i</a></li>
<li><a href="j.htm">j</a></li>
<li><a href="k.htm">k</a></li>
</ul>
</li>
<li><a href="formular.htm">E-Mail an mich</a></li>
<li><a href="http://www.google.de">Google</a></li>
<li><a href="http://www.alltheweb.com">Alltheweb</a></li>
<li><a href="http://de.wikipedia.org">wikipedia</a></li>
</ul>
CSS-Code:
ul#navi li ul#weg,#weg1 { display:none; }
ul#navi li#eins:hover ul#weg { display:block; position:fixed; top:73px; left:280px; text-align:left; }
ul#navi li#zwei:hover ul#weg1 { display:block; position:fixed; top:106px; left:280px; text-align:left; }
ul#navi { list-style:none; font-size:16px; float:left; width:210px; padding:0; border: 2px ridge silver; margin:27px 0 22px 22px; background-color:gray; position:absolute; }
ul#navi li { padding:0.3em; color:#000000; font-weight:bold; }
ul#navi a { display:block; padding:0.2em; font-weight:bold; }
ul#navi a:link { color:black; background-color:white; }
ul#navi a:visited { color:#555555; background-color:white; }
ul#navi a:hover { color:white; background-color:black; }
ul#navi a:active { color:white; background-color:silver; }
ul#weg,#weg1 { list-style:none; font-size:16px; position:relative; width:150px; padding:2px; border: 2px dotted silver; margin:22px 0 5px 0; background-color:gray; }
ul#weg,#weg1 a { display:block; font-weight:bolder; }
ul#weg,#weg1 a:link { color:white; background-color:gray; }
ul#weg,#weg1 a:visited { color:white; background-color:#999; }
ul#weg,#weg1 a:hover { color:black; background-color:gray; }
ul#weg,#weg1 a:active { color:silver; background-color:gray; }
Hat jemand ne Idee, worans liegt?
MfG