Hallo ich brauche Hilfe bei einem Dropdown Menü ich weiß nicht wie ich es erklären soll aber ich versuche es,
ich will das mein "submenu" direkt unter meinem "topmenu" ist ich habe es jetzt mit left: 30%; an die stelle gerückt wo es hin sollte aber wenn ich zb einen Neuen Menü punkt dazu mache würde es ja an dieser stelle bleiben und nicht mit gehen... ich hoffe es ist verständlich.
Hier ein Bild zur erlärung.
HTML
<div id="head"> <h1>Seite</h1>
</div>
<div id="menu"> <h2>Menü:</h2> <ul class="menu_liste"> <li class="topmenu"><a href="#">topmenu</a> <ul class="submenu"> <li class="top100"><a href="#">top101</a></li> <li class="top100"><a href="#">top102</a></li> <li class="top100"><a href="#">top103</a></li> </ul> </li> <li class="topmenu"><a href="#">Gästebuch</a></li>
<li class="topmenu"><a href="#">Kontakt</a></li> <li class="topmenu"><a href="#">Downloads</a></li> </ul> </div>Code
#head{
background-image: url(style/header.png);
background-position: center;
width: auto;
height: 120px;
text-align: center;
color: silver;
margin: auto;
z-index: 1;
letter-spacing: 30px;
background-repeat: no-repeat;
}
#head h1{
margin-left: 10%;
margin-right: 10%;
border-style: dotted;
border-color: silver;
border-radius: 10px;
}
#menu{
color: #B2FFFF;
background-image: url(style/menu.png);
background-position: center;
background-repeat: no-repeat;
margin: auto;
height: 80px;
text-align: center;
word-spacing: 20px;
z-index: 2;
}
#menu h2{
border-bottom: dotted;
display: inline;
text-align: justify;
font-size: xx-large;
}
.menu_liste li{
font-size: x-large;
display: inline;
list-style-type: none;
}
.menu_liste li a{
text-decoration: none;
color: silver;
}
.menu_liste li a:Hover{
color: #B2FFFF;
background-color: silver;
border-style: solid;
border-width: thin;
border-color: #B2FFFF;
border-radius: 10px;
letter-spacing: 5px;
}
.top100 a{
display: block;
}
.topmenu{
text-align: center;
}
.submenu{
visibility: hidden;
position: absolute;
left: 30%;
}
.topmenu:Hover .submenu{
visibility: visible;
}