DropDownMenü [Anfänger brauch Hilfe]

[sbaier]

Hi,

ich hoffe das der Eine oder Andere hier mir Mühelos helfen kann. Ich komme nicht mehr weiter...

Ich möchte ein Menü so verändern das Es ein DropDownMenü wird aber irgendwie bekomme ich es nicht hin. Ich muss dazu sagen das meine Kenntnisse auf ein minimum beschränken.

<!-- Shell -->
<div class="shell"><!-- Navigation -->
<div id="navi">
<ul>
<li class="first"><span><a href="#">Link1</a></span></li>
<li><a href="#l">Link2</a></li>
<li><a href="#l">Link3</a></li>
<li>
<a href="#l">Link4</a>
<ul class="submenu"><li><a href="#">Link4 A</a></li>
</li></ul>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>

Das wäre der HTML-Teil.

* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.5;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #716969;
background: #fff;
text-align: left;
}
a img { border: 0; }
a { color: #4372a5; text-decoration: none; }
a:hover { color:#b37cca; text-decoration: underline; }
a.gray { color:#585f63; }
.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.hidden { display:none; }
h2 { font-size:22px; color:#784c94; font-weight:bold; line-height:22px;  }
h3 { font-size:17px; color:#583072; font-style:italic; line-height:22px; display:inline; }
h4 { font-size:16px; color:#784c94; line-height:19px;  }
h5 { font-size:10px; color:#4372a5; line-height:18px; }
.header-left { width:100%; height:200px; background:#300152 url('images/header-left.gif') repeat-x 0 0; position:absolute; z-index:20;  }
.header-right {float:right; width:50%; height:200px; background:#270051 url('images/header-right.gif') repeat-x 0 0;  }
.shell { width:960px; margin:0 auto; position:relative; z-index:50; }
.shell2 {  width:960px; margin:0 auto; position:relative; z-index:150; }
#header { height:200px; position:relative; left:0; width:100%; }
#header .shell { height:200px; background:url('images/logo.jpg') no-repeat 0 0; position:relative; z-index:30; left:0px; }
#navi { background:url('images/transparent.png') 0 0; height:44px; line-height:44px; padding-top:1px; border-left:1px solid #594164; }
#navi ul { list-style-type:none; }
#submenu{position: absolute; background:url('images/nav-arrow.png') no-repeat 0 -100px; }
#submenu li a {display:block;}
#navi ul li a:hover, #submenu{color:#fff; background-position:center bottom;  text-decoration: none;}
#navi ul li { float:left; display:inline; background:url('images/nav-separator.png') no-repeat right 1px; padding:0 1px 0 0;  }
#navi ul li a {float:left; color:#fff; font-weight:bold; padding:0 18px 0 18px; }
#navi ul li a { background:url('images/nav-arrow.png') no-repeat 0 -100px; }
#navi ul li a:hover, #navi ul li a.active{  color:#fff; background-position:center bottom;  text-decoration: none;  }
#navi ul li a span { float:left; background:url('images/nav-separator.png') no-repeat left 1px; }

Und das der CSS-Teil. Hoffe doch das es beim "helfen" hilft.

Vielen Dank schonmal im Vorraus.

 

[thecain]

<ul class="submenu"><li><a href="#">Link4 A</a></li>
</li></ul>

Da ist ein Syntaxfehler... + Wenn du ein <a> hast, brauchst du kein <span> drum