DropDown Menü geht nicht!

F

FunkFlex

Mitglied
Hi,
bei meinem Versuch eun horizontales Drop Down Menü zu erstellen, stoße ich auf nen Fehler. Und zwar ordnet sich alles wunderbar horizontal an, nur funktioniert das eigentliche Drop Down nicht.
Könnt ihr euch mal den Code durchlesen und evtl. mir den Fehler sagen bitte?
Hier der HTML Text
HTML: 
	<div id="navigation">
		<div class="outerleft">
<span class="menutag">Parent1</span>
<a class="down-1" href="#">Child1</a>
<a class="down" href="#">Child2</a>

		</div>
		<div class="outer">
<span class="menutag">Parent2</span>
<a class="down-1" href="#">Child1</a>
<a class="down" href="#">Child2</a>
<a class="down" href="#">Child3</a>
<a class="down" href="#">Child4</a>
		</div>

Und hier das CSS:
Code: 
#navigation{
	width:780px;
	height:40px;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	position: relative;
	
}

#navigation .outer {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbut.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	
	
}
#navigation .outer:hover{
	float:left;
	display:block;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbuthov.gif);
	}
#naviation .outer:visited {
	float:left;
	display:block;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbut.gif);
}

#navigation .outerleft {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutleft.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

#navigation .outerleft:hover {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutlefthov.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}
#navigation .outerleft:visited {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutleft.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

#navigation .outerright {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutright.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}
#navigation .outerright:hover {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutrighthov.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}
#navigation .outerright:visited {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutright.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}
a.down-1 {
	margin-top: 1px;
}
a.down, a.down-1 {
display: inline;
width: 130px;
height:40px;
line-height:40px;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
background-image: url(navbut.gif);
}
a:visited.down, a:visited.down-1 {
display: inline;
width: 130px;
height:40px;
line-height:40px;
padding: 2px 0;
text-decoration: none;
font-weight: normal;	
background-image: url(navbut.gif);
}
a:hover.down, a:hover.down-1 {
display: inline;
width: 130px;
height:40px;
line-height:40px;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
background-image: url(navbuthov.gif);

}
span.menutag {
	display:block;
	cursor:default;
}
span.menutag:hover {
	display: block;
	cursor:default;
}

Vielen Dank schonmal!
Gruß FunkFlex
 
Du definierst bei #navigation und jeweils bei .outer und .outerleft eine feste Höhe (40px). Damit die Menüelemente sichtbar werden, musst du die Eigenschaft "overflow" auf "visible" setzen.

CSS: 
#navigation .outer {
	overflow:visible;
}
 
#navigation .outerleft {
	overflow:visible;
}
 
Wenn ich den Overflow nun auf visible setze, zeigt er mir die Menüpunkte, die eigentlich aufklappen sollten aber dauerhaft an.
Weiss nicht jemand des rätsels lösung :-)
 
Hast du den bisherigen Ansatz selbst geschrieben?
Vom Prinzip her fehlt da sowas
CSS: 
.outerleft a {
    display:none;
}
.outerleft:hover a {
    display:block;
}

So ganz blicke ich deinen Aufbau aber nicht. Du solltest erstmal etwas aufräumen, denn das hier
CSS: 
#navigation .outerleft:visited {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutleft.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}
 
#navigation .outerright {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutright.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

lässt sich auch einfach so schreiben

CSS: 
#navigation .outerright, #navigation .outerleft:visited {
	float: left;
	display: block;
	overflow:hidden;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-image:url(navbutleft.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

Und ich würde empfehlen den Aufbau des Menüs mittels Listenelementen zu machen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück