nicht angemeldet
Hi,
ich schreibe gerade eine Navigation, bei der die Unterpunkte zu einem Navigationspunkt "ausgeklappt" werden, wenn die Maus über diesen Navigationspunkt fährt. Soll in allen gängigen css2-fähigen Browsern und natürlich ohne Javascript funktionieren.
Bin auch fast am Ziel. Folgendes Beispiel funktioniert mit den neuen NS,IE,Opera. Dabei arbeite ich mit overflow visible/hidden.
Das Problem: Firefox ordnet die Menüpunkte allesamt NEBEN die div's, IN denen sie stehen sollten.
Lasse ich overflow:hidden weg, so sind die Punkte dort, wo sie sein sollten.
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>dropdownmenu ohne browserweiche</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
.huelldiv {
font-family: arial, sans-serif;
display:block;
float:left;
height:1.4em;
overflow:hidden; /*Hier hat Firefox ein Problem*/
}
a:hover.auss .huelldiv {overflow:visible;}
a.auss {font-style:italic;}
a:hover.auss {font-style:normal;}
a.inn {display:block;}
div {border: solid black 1px;}
-->
</style>
</head>
<body>
<div class="navidiv">
<a href="#" class="auss">
<div class="huelldiv">Navipunkt1
<a href="#" class="inn">Navipunkt11</a>
<a href="#" class="inn">Navipunkt12</a>
<a href="#" class="inn">Navipunkt13</a>
<a href="#" class="inn">Navipunkt14</a>
<a href="#" class="inn">Navipunkt15</a>
<a href="#" class="inn">Navipunkt16</a>
</div>
</a>
<a href="#" class="auss">
<div class="huelldiv">Navipunkt2
<a href="#" class="inn">Navipunkt21</a>
<a href="#" class="inn">Navipunkt22</a>
<a href="#" class="inn">Navipunkt23</a>
<a href="#" class="inn">Navipunkt24</a>
</div>
</a>
<a href="#" class="auss">
<div class="huelldiv">Navipunkt3
<a href="#" class="inn">Navipunkt31</a>
<a href="#" class="inn">Navipunkt32</a>
<a href="#" class="inn">Navipunkt33</a>
</div>
</a>
<a href="#" class="auss">
<div class="huelldiv">Navipunkt4
<a href="#" class="inn">Navipunkt41</a>
<a href="#" class="inn">Navipunkt42</a>
<a href="#" class="inn">Navipunkt43</a>
<a href="#" class="inn">Navipunkt44</a>
<a href="#" class="inn">Navipunkt45</a>
<a href="#" class="inn">Navipunkt46</a>
</div>
</a>
</div>
</body>
</html>
Bin für Vorschläge dankbar.
Grüße
Mrs. Olivander
MudGuard