nicht angemeldet
Ich möchte eine Seite mit einem vertikalen Menü rechts erstellen, die Menülinks sollen sich jeweils über die ganze Breite des Menüs erstrecken.
Bei folgendem Code ergibt sich das (mir unerklärliche) Problem, dass mit dem Internet Explorer die Links zwar jeweils auf eine neue Zeile gesetzt werden, sich aber nicht über die ganze Breite des Menüs erstrecken:
<style type="text/css">
div.menu {float:left}
a.hauptlink {display:block}
</style>
<div class="menu">
<a class="hauptlink" href="index.htm">Start</a>
<a class="hauptlink" href="album.htm">Fotoalbum</a>
</div>
<div> Hier der Inhalt.</div>
Mit Firefox und Opera wird hingegen alles wie gewünscht angezeigt.
----------------------------------------------------------------------------------------
Dann habe ich versucht, auf dieser Basis ein aufklappbares Menü zu entwickeln.
Mit dem unteren Code tritt aber das Problem in IE _und_ Firefox auf.
Für den Firefox kann ich a.hauptlink und .menuboxen auf width:100% setzen, und alles wird wie gewünscht angezeigt - aber nicht im IE, dort erstrecken sich die Menülinks dann über die ganze Bildschirmbreite.
<style type="text/css">
div.inhalt {height:100%;}
div.menu {float:left;}
a.hauptlink {display:block;float:left;white-space:nowrap}
.submenu {position:absolute;display:none;z-index:99;margin-right:0;background-color:#fff}
.submenu a {display:block;white-space:nowrap}
.menuboxen {clear:both;float:left}
</style>
<div class="menu">
<div class="menuboxen" onMouseOver="document.getElementById('sub1').style.display='inline';"
onMouseOut="document.getElementById('sub1').style.display='none';">
<a class="hauptlink" href="/">Start</a>
<div id="sub1" class="submenu">
<a href="unterlink1.html">Unterlink 1</a>
<a href="unterlink2.html">Unterlink 2</a>
</div>
</div>
<br clear="all">
<div class="menuboxen" onMouseOver="document.getElementById('sub2').style.display='inline';"
onMouseOut="document.getElementById('sub2').style.display='none';">
<a class="hauptlink" href="album.htm">Fotoalbum</a>
<div id="sub2" class="submenu">
<a href="unterlink1.html">Unterlink 1</a>
</div>
</div>
<br clear="all">
</div>
<div class="inhalt">Hier der Inhalt.</div>
o.O(dankbar für jede Hilfe...)