tschinkes
Mitglied
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
Meine CSS ist wie Folgt auf das Menü eingestellt:
Den Java Trick alla suckerfish habe ich auch eingebunden...
Es will einfach net, wäre echt für jede Hilfe dankbar
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
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"> </div>
</div>
Meine CSS ist wie Folgt auf das Menü eingestellt:
CSS:
#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
Zuletzt bearbeitet: