Horizontale Navigation mit Drop Down, kriegs nicht hin
Julinus
- css
Hallo,
es klappt einfach nicht so wie ich mir das vorgestellt habe. Anscheinend ist die horizontale Navigation mit Drop Down das schwierigste Menü was man erstellen kann.
Ich habs schon versucht, aber ich kriegs weder mit den Hintergründen und den Rahmen hin, noch mit der Positionierung. Im IE verschiebt er immer das komplette untermenü wenn sich die Fenstergröße ändert.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Willkommen bei Adobe GoLive 6</title>
<style type="text/css" media="screen">
<!--
ul.examp {margin-left:1em; padding:0; list-style:none; position:absolute; width:800px; background-color:#999;}
ul.examp li {float:left; margin:0; padding:0; list-style:none; width:100px; padding-left:10px; line-height:20px; border:1px solid #fff;}
ul.examp li:hover {background-color: #999;}
ul.examp2 {display:none; margin:0; padding:0; list-style:none;}
ul.examp2 li {margin:0; padding-left:0px; list-style:none; background-color:#999; border:1px solid #fff; line-height:20px;}
ul.examp2 li:hover {margin:0; padding:0; list-style:none; color:#CC0000;}
.examp li:hover ul.examp2 {display:block;}
ul.examp a:link, ul.examp a:visited {color:#fff; text-decoration:none; display:block; width:100%; font-size:0.7em; font-family:Verdana;}
ul.examp a:hover, ul.examp a:active, ul.examp a:focus {color:#ccc; text-decoration:none; display:block; font-size:0.7em;}
body { behavior: url(hover.htc);
-->
</style>
</head>
<body bgcolor="#ffffff">
<ul class="examp">
<li><a href="#">Home</a>
<ul class="examp2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Firma</a>
<ul class="examp2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</body>
</html>
Könnt Ihr bitte mal einen Blick drauf werfen.
Gruss
Julinus
Hi Julinus,
dein Beispiel funktioniert in meinem IE6 garnicht - die Untermenüs klappen nicht auf.
Wenn ich ein DropDown-Menü schreibe, arbeite ich mit Conditional Comments. Damit erstelle ich einen eigenen Navigationsblock für den IE.
Grüße
Mrs. Olivander
Hallo Mrs. Olivander,
Wenn ich ein DropDown-Menü schreibe, arbeite ich mit Conditional Comments. Damit erstelle ich einen eigenen Navigationsblock für den IE.
Das kenne ich nicht. Kannst Du mir eventuell ein Beispiel posten.
Gruss
Julinus