Horizontales Untermenü

[tschinkes]

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]

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/

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]

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...

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