lauramarie |
30.03.2015 18:47 |
CSS Dropdown Menü lässt sich nicht zentrieren
Liste der Anhänge anzeigen (Anzahl: 1)
Folgendes Problem:
ich habe ein dropdown Menü erstellt, dass mittig auf dem gelben Banner platziert sein soll. Zusätzlich sollen beide stets mittig von der Seite platziert sein, auch wenn das Browserfenster verkleinert wird und hierbei sollen die einzelnen Menüpunkte einen gleichmäßigen Abstand zueinander haben.
Ich habe mir schon viele Threads zu dem Thema durchgelesen, doch leider konnte ich mit keiner Lösung bei Problem beheben. Vielleicht übersehe ich auch etwas? :helpsmil:
Danke im Voraus! :happy:
HTML-Code:
<nav>
<ul>
<li class="navi"= "cat1">
<a href="#">Home</a>
</li>
<li class="navi"= "cat2">
<a href="#">Team</a>
<ul>
<li><a href="#" >Britte Berse</a>
<li><a href="#" >Denise Schüttler</a>
<li><a href="#" >Katharina Will</a>
<li><a href="#" >Jasmin Eilau</a>
<li><a href="#" >Stepahnie Steinert</a>
<li><a href="#" >Stephanie Kroll</a>
<li><a href="#" >Celina Scott</a>
<li><a href="#" >Jeanette Klingen</a>
<li><a href="#" >Meike Bäck</a>
<li><a href="#" >Jana Faubel</a>
<li><a href="#" >Helfer Team</a>
<li><a href="#" >Helfermächen und -jungs</a>
</ul>
</li>
<li class="navi"= "cat3">
<a href="#">Angebot</a>
<ul>
<li><a href="#" >Reiten für Jung und Alt</a>
<li><a href="#" >Ferienprogramm</a>
<li><a href="#" >Kindergeburtstage</a>
<li><a href="#" >Schulklassen und Kindergärten</a>
<li><a href="#" >Lehrgänge und Reitabzeichen</a>
<li><a href="#" >Turniere</a>
</ul>
</li>
<li class="navi"= "cat4">
<a href="#">Die Höfe</a>
<ul>
<li><a href="#" >Gut Dronsberg</a>
<li><a href="#" >Hof Lembeck</a>
</ul>
</li>
<li class="navi"= "cat5">
<a href="#">Gästebuch</a>
</li>
<li class="navi"= "cat6">
<a href="#">Kontakt / Anmeldung</a>
</li>
</ul>
</nav>
Code:
#banner{
padding-top: 30px;
position: fixed;
left: 50%;
margin-left: -545px;
}
#content{
width: 977px;
height: 4000px;
background-color: lightgrey;
margin: auto;
margin-top: -30px;
}
html{
background-image: url(bild2.jpg);
}
/*Navigation*/
nav {
width: 1024px;
position: fixed;
height: 80px;
margin-top: 35px;
left: 50%;
margin-left: -545px;
}
nav ul {
padding:0px;
margin: 0px auto;
font-family: Helvetica;
font-weight: lighter;
font-size: 18px;
}
nav ul:after {
clear: both;
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
nav ul li {
list-style: none;
float:left;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
-webkit-transition: background 0.1s ease-out 0s;
-moz-transition: background 0.1s ease-out 0s;
-o-transition: background 0.1s ease-out 0s;
transition: background 0.1s ease-out 0s;
border: 1px solid red;
background-color: pink;
}
nav ul li:hover > ul {
visibility: visible;
}
nav ul li:hover a, nav ul li:hover > ul li a {
background-color: #f7eeb4;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
}
nav ul li ul li a:hover{
color: black;
}
/*nav ul li: hover >a = Schrift der Navigation, wenn Maus darüber fährt*/
nav ul li:hover > a {
color: black;
}
/*nav ul li ul li a = Schrift des Untermenüs, wenn die Maus nicht darüber fährt*/
nav ul li ul li a {
color: grey;
}
/*Schrift/Hintergrund des Untermenüs, auf der gerade die Maus ist*/
nav ul li ul li a:hover{
color: black;
background-color: #FAFAFA !important;
}
|