✔ Problem mit Dropline Menü

A

alex130

Erfahrenes Mitglied
Hallo,
ich verwende dieses Dropline Menü http://www.cssplay.co.uk/menus/simple_dropline.html
Aber ich ein ein Problem und zwar weiß ich nicht, wie ich die Höhe der oberen Navi verändern kann, nur mit "height.." funktioniert es nicht.
Und wie kann ich einstellen, dass die Navi z.B. nur 900px breit ist, aber die Farben genau so bleiben, also dass die Navi 100% breit ist, aber die Navigationspunkte erst in der Mitte kommen...
Ich hoffe ihr wisst, was ich meine.
Hier mein Code:

HTML:
HTML: 
<div id="nav">
<ul class="current"><li><a href="#">Test 1
</a></li></ul><ul class="sub_active"><li class="current_sub"><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>

<ul class="select"><li><a href="#">Test 2
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

<ul class="select"><li><a href="#">Test 3
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

<ul class="select"><li><a href="#">Test 4
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
</div>

CSS:
Code: 
#nav {margin:0 auto;}

/* the styling */
#nav {width:100%; height:30px; background:#343434; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a, #nav .current a {
display:block; 
height:20px; 
float:left; 
background:#343434; 
padding:0 10px 0 10px; 
text-decoration:none; 
font-size:12px; 
line-height:20px; 
white-space:nowrap; 
color:#fff;
}

* html #nav .select a, * html #nav .current a {
width:1px; 
height:21px;
}


#nav .select a:hover, 
#nav .select li:hover a {
background:#232323; 
cursor:pointer; 
color:#ff0;
}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#232323; color:#ff0;}


#nav .sub li a:hover, 
#nav .select a:hover .sub li a:hover, 
#nav .select li:hover .sub li a:hover {background:#232323; color:#ff0;}

#nav .sub_active .current_sub a, 
#nav .sub_active a:hover {background:#232323; color:#ff0;}

#nav .select li a:hover .sub, 
#nav .select li:hover .sub {display:block; position:absolute; width:100%; top:20px; left:0; background:#232323; margin-top:0; padding:0; z-index:100; color:#fff; font-size:11px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}

#nav .sub_active {display:block; position:absolute; width:100%; top:20px; left:0; background:#232323; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}

#nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; 
background:#232323; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a, 
#nav .select li:hover .sub li a {display:block; background:#232323; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}

Danke
 
Hi,

in dem Stylesheet folgen nach dem Selektor

Code: 
#nav {width:100%; height:30px; background:#343434; position:relative;}
noch weitere, in denen du zum einen ebenfalls die derzeitige / ursprüngliche height-Deklaration aufstocken, und zum anderen die Angabe zur top-Position des Submenüs entsprechend erhöhen mußt.

mfg Maik
 
Hi,
danke nun passt es schon, aber beim drüber fahren, wird es wieder größer, ich weiß nicht woran das liegt.
Hier ist mein Code:
Code: 
#nav {margin:0 auto;}

/* the styling */
#nav {width:100%; height:36px; background:#343434; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a, #nav .current a {
display:block; 
height:30px; 
float:left; 
background:#343434; 
padding:6px 10px 0 10px; 
text-decoration:none; 
font-size:12px; 
line-height:20px; 
white-space:nowrap; 
color:#fff;
}

* html #nav .select a, * html #nav .current a {
width:1px; 
height:21px;
}


#nav .select a:hover, 
#nav .select li:hover a {
background:#232323; 
cursor:pointer; 
color:#ff0;
}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0px;}

#nav .current a {background:#232323; color:#ff0;}


#nav .sub li a:hover, 
#nav .select a:hover .sub li a:hover, 
#nav .select li:hover .sub li a:hover {background:#232323; color:#ff0;}

#nav .sub_active .current_sub a, 
#nav .sub_active a:hover {background:#232323; color:#ff0;}

#nav .select li a:hover .sub, 
#nav .select li:hover .sub {display:block; position:absolute; width:100%; top:30px; left:0; background:#232323; margin-top:0px; padding:0; z-index:100; color:#fff; font-size:11px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}

#nav .sub_active {display:block; position:absolute; width:100%; top:36px; left:0; background:#232323; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0px; margin-t\op:1px;}

#nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; 
background:#232323; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a, 
#nav .select li:hover .sub li a {display:block; background:#232323; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}
Danke
 
Code: 
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#888; height:36px; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}


... dürfte hier Abhilfe schaffen.

mfg Maik
 
Danke, aber ein kleiner Fehler ist immer noch, es verrutscht noch immer beim drüber fahren mit der Maus (das Submenü).
Und weißt du wie ich die Navigationspunkte in die Mitte bekomme?
Danke
 
Ich hab die eingangs genannte Wunschhöhe mit 30px und meinen letzten Vorschlag im Original-Menü angewendet, und da verrutscht bei mir browserübergreifend nichts.

Stu Nicholls' Demo Centering Float Left Menus dürfte für dich ganz interessant sein.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück