Bin seit langem auf der Suche nach einer Lösung betreffend meiner Navigation welche ich gerne umsetzen möchte.
Im Firefox und IE7 funktioniert es wie gewünscht. Im IE6 jedoch springt die Navigation wenn ich mit der Maus
über die Link's gehe. Ebenso entsteht ein grösserer Abstand zwischen z.b. Rubrik3.1 und Rubrik3.2.
Habe mal zwei Screenshots erstellt.
Klicken um den Anhang anzusehen
Klicken um den Anhang anzusehen
QUELLTEXT
<!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">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}
#subnavibereich {
float: left;
width:300px;
}
#subnavibereich ul{
margin:0;
}
#subnavibereich li {
list-style-type: none; /*ohne Aufzählungspunkte*/
margin:0;
}
#subnavibereich a {
display:block;
padding:2px;
background-color:#99FF33;
padding-left:10px;
}
#subnavibereich a:hover, #subnavibereich a:focus {
background-color:#FF6600;
}
/*IE 5.x und 6: hasLayout für Hyperlinks*/
* html #subnavibereich ul,
* html #subnavibereich a{
height:1%;
}
/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
/*margin-left:9px;*/
}
#subnavibereich ul li ul li a {
background-color:#FFFF66;
display:block;
padding:2px;
padding-left:10px;
margin-bottom:2px;
}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;
}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
display:block;
padding:2px;
padding-left:10px;
}
-->
</style>
</head>
<body>
<div id="subnavibereich">
<ul>
<li><a href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>
<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">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}
#subnavibereich {
float: left;
width:300px;
}
#subnavibereich ul{
margin:0;
}
#subnavibereich li {
list-style-type: none; /*ohne Aufzählungspunkte*/
margin:0;
}
#subnavibereich a {
display:block;
padding:2px;
background-color:#99FF33;
padding-left:10px;
}
#subnavibereich a:hover, #subnavibereich a:focus {
background-color:#FF6600;
}
/*IE 5.x und 6: hasLayout für Hyperlinks*/
* html #subnavibereich ul,
* html #subnavibereich a{
height:1%;
}
/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
/*margin-left:9px;*/
}
#subnavibereich ul li ul li a {
background-color:#FFFF66;
display:block;
padding:2px;
padding-left:10px;
margin-bottom:2px;
}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;
}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
display:block;
padding:2px;
padding-left:10px;
}
-->
</style>
</head>
<body>
<div id="subnavibereich">
<ul>
<li><a href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>
Kann mir vielleicht jemand weiterhelfen ? Habe nun schon diverses versucht - leider ohne Erfolg !
Gruss Tsunami