Hi,
ich hab grade ne Navi-leiste entdeckt und ne kurze frage:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/><!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
</head>
<div id="menu">
<ul>
[*]<h2>Titel 1</h2>
<ul>
[*]eins
[*]zwei ...
<ul>
[*]zwei a
[*]zwei b
[*]zwei c
[*]zwei d
[/list]
[*]drei ...
<ul>
[*]drei a
[*]drei b ...
<ul>
[*]drei b i
[*]drei b ii
[*]drei b iii
[/list]
[*]drei c
[/list]
[/list][/list]
</div>
CSS
#menu { width: 80px; background: #eee; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb;
margin: 0; padding: 2px 3px; }#menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase; }
#menu a { color: #000; background: #efefef; text-decoration: none; }
#menu a:hover { color: #a00; background: #fff; }
Hier legen wir die Breite der Menu-Einträge (80px), Schriftart, Rahmen-, Text- und Hintergrundfarben fest und schalten die Listenzeichen ab. Mit der Zeilenhöhe (16px) regulieren wir die Höhe der Einträge. display: block sorgt dafür, dass Titel und Links stets die ganze Breite ausfüllen.
Bleiben noch Fragen der Positionierung zu klären:
#menu li { position: relative; }
#menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }
div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}
#menu { width: 100%; background: #eee; float: left; }#menu ul { list-style: none; margin: 0; padding: 0; width: 80px; float: left; }
#menu a, #menu h2
{ font: bold 11px/16px arial, helvetica, sans-serif;
display: block; border-width: 1px; border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0; padding: 2px 3px; }#menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase; }
#menu a { color: #000; background: #efefef; text-decoration: none; }
#menu a:hover { color: #a00; background: #fff; }
#menu li {position: relative;}
#menu ul ul { position: absolute; z-index: 500; }
#menu ul ul ul { position: absolute; top: 0; left: 100%; }
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
wie bekomm ich weitere horizontalliegende Hauptpunkte hin?
THX
