Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 30.03.2015, 17:47
lauramarie lauramarie ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2015
Beiträge: 2
lauramarie befindet sich auf einem aufstrebenden Ast
Frage CSS Dropdown Menü lässt sich nicht zentrieren

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?
Danke im Voraus!

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;
}
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2015-03-30 um 17.36.47.png (906,9 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links