# Horizontales Untermenü



## tschinkes (8. Juli 2010)

Hallo sitze schon den ganzen Tag an meinem Webseiten Menü...
Ich hab ein Horizontales Hauptmenü und manche Punkte sollen ein Untermenü bekommen, ebenfalls Horizonztal. Habe den ganzen Tag probiert und auch einige Beispiele die Online sind nachgebaut, aber leider ist mein Untermenü immer vertikal. Die jetztige Situation sieht wie folgt aus: HIER
Habe folgende Struktur in der index.html

```
<div id="main-nav">
    <ul id="nav">
        <li><a href="tobi.html">Tobias</a>
        <ul>
        	<li><a href="external-content.htm" >Bio</a></li>
            <li><a href="external-content.htm" >Musik</a></li>
            <li><a href="external-content.htm" >Kontakt</a></li>
        </ul></li>
        <li><a href="external-content.htm" >Giuseppe</a>
        <ul>
        	<li><a href="external-content.htm" >Bio</a></li>
            <li><a href="external-content.htm" >Musik</a></li>
            <li><a href="external-content.htm" >Kontakt</a></li>
        </ul></li>
        <li><a href="external-content.htm" >Gästebuch</a></li>
        <li><a href="external-content.htm" >Gallerie</a></li>
        <li><a href="external-content.htm" >Musik</a></li>
        <li><a href="test.php" >Support</a></li>
        <li><a href="impressum.html" >Infos</a>
        <ul>
        	<li><a href="external-content.htm" >Bio</a></li>
            <li><a href="external-content.htm" >Musik</a></li>
            <li><a href="external-content.htm" >Kontakt</a></li>
        </ul></li>
        
    </ul>
    <div class="clear-both">&nbsp;</div>
</div>
```

Meine CSS ist wie Folgt auf das Menü eingestellt:


```
#main-nav{
	height:29px;
	float:left;
	background-image:url(Bilder/nav-bg.gif);
	background-repeat:repeat-x;
	background-position:top left;
	width:100%;
	}

/* MAIN MENUE */

#main-nav{
	height:29px;
	float:left;
	background-image:url(Bilder/nav-bg.gif);
	background-repeat:repeat-x;
	background-position:top left;
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#main-nav ul,
#main-nav li{
	padding:0px;
	margin:0px;
	list-style-type:none;
}

#main-nav ul{
	height:29px;
	line-height:29px;
	background-image:url(Bilder/nav-bar.gif);
	background-position:right;
	background-repeat:no-repeat;
	float:left;
	padding:0px 1px 0px 0px;
	margin:0px 0px 0px 10px;
}

#main-nav li{
	height:29px;
	line-height:29px;
	display:inline;
	position:relative;
	float:left;
	width:110px;
	text-align:center;
}

#main-nav li a{
	height:29px;
	width:110px;
	text-align:center;
	float:left;
	background-image:url(Bilder/nav-bar.gif);
	background-position:left;
	background-repeat:no-repeat;
}

#main-nav li a:link,
#main-nav li a:visited{
	color:#FFFFFF;
	text-decoration:none;
}

#main-nav li.active a,
#main-nav li a:hover{
	background-image:url(Bilder/active.gif);
	background-repeat:no-repeat;
	background-position:left;
}


/* SUB MENUE */
#nav li ul { 
	display: none;
	position: absolute;
	top: 28px;
	left: 0px;
	height: 28px;
	padding: 0;
	margin: 0;
}

#nav li ul a {
	display: block;
	background-image: none;
	float: left; 
	width: auto;
	font-size: 10px;
	font-weight: bold;
	color: #FFF;
	padding-right: 12px;
}

#nav li ul {
	float: left; 
	width: auto;
	font-weight: normal;
	color: #FFF;
	padding-top: 6px;
	padding-right: 12px;
	background-image: none;
}

#nav li ul a:hover {
	background-image: none;
	color: #FFF;
}

#nav li:hover ul {
	display: block;
}

#nav li. ul { /* für den IE*/
	display: block;
	z-index: 6000;
}
```

Den Java Trick alla suckerfish habe ich auch eingebunden...

Es will einfach net, wäre echt für jede Hilfe dankbar


----------



## Maik (8. Juli 2010)

Moin,

in diesem Regelblock muß position:relative entfernt werden:

```
#main-nav li{
    height:29px;
    line-height:29px;
    display:inline;
    position:relative;
    float:left;
    width:110px;
    text-align:center;
}
```

Beispiele für solch ein "Dropline Menü" kannst du bei Stu Nicholls unter der gleichnamigen Kategorie studieren: http://www.cssplay.co.uk/menus/



tschinkes hat gesagt.:


> Den Java Trick alla suckerfish habe ich auch eingebunden...
> 
> Es will einfach net



Der "Java"-Trick ist JavaScript, denn Java und JavaScript haben nichts miteinander zu tun, und ausschließlich dem IE6 gewidmet, da er die Pseudoklasse :hover im Selektor #nav li:hover nicht interpretiert, die beim Überfahren der Menüpunkte die versteckten Untermenüs anzeigt.

Dennoch funktioniert das Aufklappen der Submenüs in ihm überhaupt nicht, da du zum einen im Scriptcode den ID-Bezeichner *main-nav* des umschliessenden DIVs, und nicht den ID-Bezeichner *#nav* des <ul>-Elements angegeben hast, und zum anderen der darin genannte Klassenbezeichner *over* in deinem CSS nirgends auftaucht.

mfg Maik


----------



## tschinkes (8. Juli 2010)

Maik hat gesagt.:


> Moin,
> 
> in diesem Regelblock muß position:relative entfernt werden
> 
> Der "Java"-Trick ist JavaScript, denn Java und JavaScript haben nichts miteinander zu tun, und ausschließlich dem IE6 gewidmet, da er die Pseudoklasse :hover im Selektor #nav li:hover nicht interpretiert, die beim Überfahren der Menüpunkte die versteckten Untermenüs anzeigt.



Sorry es war ein Uhr Nachts  War keine Absicht natürlich meinte ich JavaScript anstatt Java Suckerfish...



Maik hat gesagt.:


> Dennoch funktioniert das Aufklappen der Submenüs in ihm überhaupt nicht, da du zum einen im Scriptcode den ID-Bezeichner *main-nav* des umschliessenden DIVs, und nicht den ID-Bezeichner *#nav* des <ul>-Elements angegeben hast, und zum anderen der darin genannte Klassenbezeichner *over* in deinem CSS nirgends auftaucht.
> 
> mfg Maik



Ja, ich hatte die .over Klasse schon drinne, es war nur durch das verschiedene rumprobieren, das der Quelcode jetzt etwas vermurkselt ist. Hatte die 'nav' vorher deklariert, wie gesagt war alles nur test..

Also dank deinem Tip (wie doof eigentlich von mir...) bewegt sich was, jetzt hängen nur alle Menü Punkte übereinander und bekomm se nimmer auseinander oO, werd mal weiter rumfriemeln


----------

