Drop Down Menü brauche kleine Hilfe

Jopo · 25. Januar 2015

Jo da bin ich wieder.
Ich zeich euch mal den HTML und CSS Code.
Ich versuche beim Drop Down Menü folgendes:
...
...
...
<nav>
<ul>
<li>
<a href"#">Hauptkategorie</a>
<ul>
<li>
<a href="#">Unterkategorie</a>
<ul>
<li>
<a href="#">Hatl etwas</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
...
...
...

Ansich geht es ja aber die überlagern sich
Die Unterkategorie überlagert sich dann über Hauptkategorie.
Das will ich nicht.Wewiß jemand wie man das behbenkann?

Jetzt kommt der richtige Quellencode:

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>SpieleHelfer.1x.de - Startseite</title>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="korper" align="center">
			<div id="kopfbereich" align="center">
				<div id="banner" align="center"></div>
				<div id="navigation" align="center">
						<nav>
							<ul id="menu">
								<li class="navigationdeko">
									<a href="#SpieleHelfer/">Startseite</a>
								</li>		
								<li class="navigationdeko">
                  <a href="#">Viedos</a> 
                  <ul>
                    <li>
                      <a href="#">Konsolen</a>
                      <ul>
                      	<li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                  </ul>
                </li>
                <li class="navigationdeko">
                  <a href="#">Tutorials</a> 
                  <ul>
                    <li>
                      <a href="#">?????</a>
                      <ul>
                      	<li>
                      <a href="#">?????</a>
                    </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                  </ul>
                </li>
                <li class="navigationdeko">
                  <a href="#">Tipps und Tricks</a> 
                  <ul>
                    <li>
                      <a href="#">?????</a>
                      <ul>
                      	<li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                  </ul>
                </li>		
								<li class="navigationdeko">
									<a href="#">Gamescom</a> 
									<ul>
										<li>
											<a href="#">?????</a>
											<ul>
												<li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
											</ul>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
									</ul>
								</li>
								<li class="navigationdeko">
									<a href="#">Forum</a> 
									<ul>
										<li>
											<a href="#">?????</a>
											<ul>
												<li>
                      <a href="#">?????</a>
                    </li>
                    <li>
                      <a href="#">?????</a>
                    </li>
											</ul>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
									</ul>
								</li>				
								<li class="navigationdeko">
									<a href="#">Support</a> 
									<ul>
										<li>
											<a href="#">?????</a>
											<ul>
												<li>
                      <a href="#">?????</a>
                    </li>
											</ul>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
									</ul>
								</li>
								<li class="navigationdeko">
									<a href="#">Impressum</a> 
									<ul>
										<li>
											<a href="#">?????</a>
											<ul>
												<li>
                      <a href="#">?????</a>
                    </li>
											</ul>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
										<li>
											<a href="#">?????</a>
										</li>
									</ul>
								</li>
							</ul>
		    			</nav>
					</div>	
				</div>
				<div id="hauptbereich" align="center">
					<div id="linkeseite">
						a
					</div>
					<div class="test"></div>
					<div id="mitte">
						b
					</div>
					<div class="test"></div>
					<div id="rechteseite">
						c
					</div>
				</div>	
			</div>
		</body>
	</html>

Alles anzeigen

CSS

body{
	margin : 0;
	padding : 0;
	background : url(bilder/hintergrund.png);
}




#korper{
	width: 1120px;
	height: 2000px;
}




/*Kopfbereich Anfang*//*Kopfbereich Anfang*//*Kopfbereich Anfang*//*Kopfbereich Anfang*//*Kopfbereich Anfang*/




#kopfbereich{
	width: 1120px;
	height: 275px;
}




#banner{
	width: 1120px;
	height: 200px;
	background : url(bilder/banner.png) no-repeat scroll 0 0/ 100% 100%;
}




/* Menü Anfang *//* Menü Anfang *//* Menü Anfang *//* Menü Anfang *//* Menü Anfang *//* Menü Anfang */




nav {
    clear : both;
	width : 800px;
	height : 65px;
}




nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}




nav ul,nav ul li{
    background-color:#1b1919 ;
	border-color: # FF858585 ;
	border: 1px solid;
}
nav ul li {
    list-style: none;
    float:left;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: silver;
    padding: 4px 15px 4px 15px;




    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}




nav ul li.navigationdeko:hover a, nav ul li.navigationdeko:hover > ul li a  {
    background-color: # FF2D2D2D ;
}




nav ul li:hover > a {
    color: #FAFAFA;
}
nav ul li:hover > ul {
    visibility: visible;
}




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 {
    color: #FAFAFA;
}
nav ul li ul li a:hover{
	color: #333;
	background-color: #FAFAFA !important;
} 




#navigation{
	position: relative;
	width: 800px;
	height: 65px;
}
/*Menü Ende*//* Menü Ende *//* Menü Ende *//* Menü Ende *//* Menü Ende *//* Menü Ende *//* Menü Ende */
/*Kopfbereich Ende*//*Kopfbereich Ende*//*Kopfbereich Ende*//*Kopfbereich Ende*//*Kopfbereich Ende*/




/*Hauptbereich Anfang*//*Hauptbereich Anfang*//*Hauptbereich Anfang*//*Hauptbereich Anfang*//*Hauptbereich Anfang*/
#hauptbereich{
	width: 1120px;
	height: 1500px;
}
#mitte{
	float: left;
	display: block;
	border: 3px solid;
	border-radius: 15px;
	border-color: #e3e3e3;
	background: #9d9d9d;
	width: 480px;
	height: 1500px;
}




#linkeseite{
	float: left;
	display: block;
	border: 3px solid;
	border-radius: 15px;
	border-color: #636262;
	background: #464646;
	width: 300px;
	height: 1500px;
}
#linkeseite form{
	margin : 0px;
	padding : 0px;
}
#rechteseite{
	float: left;
	display: block;
	border: 3px solid;
	border-radius: 15px;
	border-color: #636262;
	background: #464646;
	width: 300px;
	height: 1500px;
}
#rechteseite form{
	margin : 0px;
	padding : 0px;
}
.test{
	float: left;
	display: block;
	margin-top: 15px;
	background: url(bilder/platzhalter.jpg) no-repeat scroll 0 0/ 98.75% 98.75%;
	width: 10px;
	height: 1500px;
}
.test form{
	margin : 0px;
	padding : 0px;
}
/*Hauptbereich Ende*//*Hauptbereich Ende*//*Hauptbereich Ende*//*Hauptbereich Ende*//*Hauptbereich Ende*/

Alles anzeigen

Danke im Voraus

wolf · 25. Januar 2015

Versuche dich mal auf den Wesentlichen Code zu beschränken..
hier mal das wesentliche html

HTML

<div>
    <nav>
        <ul>
            <li>
                <a href="#">Startseite</a>
            </li>
            <li>
                <a href="#">Viedos</a> 
                <ul>
                    <li>
                        <a href="#">Konsolen</a>
                        <ul>
                            <li>
                                <a href="#">Untergruppe 1</a>
                            </li>
                            <li>
                                <a href="#">Untergruppe 2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Sth</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

Alles anzeigen

Gleiches gilt für den CSS Code!
Den Code ein bisschen strukturieren .. dann bleibt es halbwegs übersichtlich

CSS

*{
    margin: 0;
    padding: 0;
}
nav{
    width : 800px;
    height : 65px;
}
nav ul:after {
    clear: both;
    content: "";
    display: block;
}
/* STANDARTS */
nav ul,
nav li{
    background-color: black;
}
nav li{
    list-style: none;
}
nav li a{
    text-decoration: none;
    display: block;
    color: red;
    padding: 4px 15px 4px 15px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
nav li:hover > a {
    background-color: white;
}
/* EBENE 1 */
nav>ul>li{
    float: left;
}
/* EBENE 2+ */
nav>ul ul{
    display: none;
    position: relative;
}
nav>ul ul ul{
    position: absolute;
    left: 100%;
    top: 0;
}#
/* HOVER -> Nächstes UL anzeigen */
nav li:hover>ul{
    display: block;
}

Alles anzeigen

http://codepen.io/wolf-w/pen/YPQvWR da funktioniert alles einwandfrei oder?

Viel Spaß

Drop Down Menü brauche kleine Hilfe

Jetzt mitmachen!

Teilen