Navileiste erstellen

yuro

Erfahrenes Mitglied
Hallo,

so eine navileiste wollt ich mir zusammenstellen nur klappt das nicht ganz mit dem hover effekt. Hier mal der gesamte code:

navi.jpg

Code:
#navigation {
	margin-left: 85px;
	margin-top: 313px;
	float: left;
	width: 724px;
	height: 32px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../images/menu_black_bar.png);
}

/*zeigt auf jede <ul> in der Box Navigation*/
#navigation ul {
	margin:0; 
	padding:0;
	list-style: none;
}

/*zeigt auf <li>, der ein Kind von <ul> ist*/
#navigation ul li {
	display:inline;
	height:30px; 
	float:left; 
	list-style:none;
	/*margin-left: 15px;*/
	position: relative;
}

#navigation li {
	/*padding-top: 8px;*/	
}

#navigation li a {
	color:#fff;
	width: 253px; 
	text-decoration:none;
	padding: 10px 120px 10px 50px;
	margin: 0;
}

#navigation1 li a:hover {
	background-image: url(../images/menu_hover_left.png) no-repeat;
	height: 32px;
	text-decoration:underline;
}

#navigation2 li a:hover {
	background-image: url(../images/menu_hover_center.png) no-repeat;
	text-decoration:underline;
}

#navigation li ul {
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	left: 0px; 
	top: 32px;
	font-size: 10px;
	background-image: url(../images/dropdown_sub_content.png);
	background-repeat: repeat-y;
}

#navigation li:hover ul {
	display: block;
	width: 257px; /*Breite des Untermenüs*/
}

#navigation li li {
	list-style: none;
	display: list-item;
	width: 100%;
}

#navigation li li a {
	color:#000; 
	text-decoration:none;
}

#navigation li li a:hover {
	text-decoration:underline;
}

HTML:
	<div id="navigation">
<ul>
            <li id="navigation1">
            <a href="#"><strong>Dektro Abel</strong></a></li>

            <li id="navigation2">
            <a href="#"><strong>Leistungen</strong></a>
                <ul> 
					<li><a href="#" style="padding:20px 0 2px 20px;">Wir &uuml;ber uns</a></li>
   					<li><a href="#" style="padding:0 0 2px 20px;">Philosophie</a></li>
   					<li><a href="#" style="padding:0 0 2px 20px;">Arbeitsweise</a></li>
                    <img src="dropdown_sub_footer.png" /> 
                </ul> 
            </li>

            <li>
            <a href="#"><strong>Kontakt</strong></a>
                <ul> 
                	<li><a href="#">sub menu item 1</a></li>
   					<li><a href="#">sub menu item 2</a></li>
   					<li><a href="#">sub menu item 3</a></li>
   					<li><a href="#">sub menu item 4</a></li>
                    <img src="dropdown_sub_footer.png" />
                </ul>
            </li>
        </ul>

kann mir jemand helfen?
 
Zurück