DropDown Menü Probleme bei CSS

mohmadt93 · 2. August 2016

Hallo,

meine Seite wurde vor paar Jahren von jemand anderem erstellt und ich habe kein ausreichendes Wissen über CSS. Ich wollte aus einem normalen Navigationsmenü ein DropDown machen, allerdings kriege ich das einfach nicht hin. Habe mir viele Tutorials angeschaut, aber speziell bei diesem klappt das nicht. Ich hoffe jemand kann mir helfen. Ich habs einmal hinbekommen Unterpunkte unter Menüpunkt 2 einzutragen, wenn man mit der Maus drüberging, kamen die Unterpunkte auf, allerdings oben links an der Ecke, wo der wrapper-right beginnt und ich hab es nicht unter den Reiter Menüpunkt2 bekommen.

Danke im Voraus.

HTML

<div class="wrapper-right">
<nav>
<ul>
<li><a href="index.php" class="active">Menüpunkt1</a></li>
<li><a href="name.php">Menüpunkt2</a>
<ul>					
<li><a href="#"">Unterpunkt1</a></li>					
<li><a href="#"">Unterpunkt2</a></li>					
<li><a href="#"">Unterpunkt3</a></li>					
</ul>					
</li>					
<li><a href="name.php">Menüpunkt3</a></li>				
</ul>			
</nav>




<div id="main">				
<h1>Überschrift</h1>				
<p>				
<img src="img/bild.jpg" alt="Text" class="flow-img">				
<span>TEXT TEXT TEXT</span>				
<br><br>				
<a href="tel:Nummer" class="tel">Nummer</a>				
<br><br>								
<strong>TEXT TEXT</strong>				
<br>	
TEXTTEXTTEXT				
</p>

<section>					
<h2>Überschrift</h2>					
<img src="img/bild.jpg" alt="TEXT">					
<ul>						
<li>TEXT</li>						
<li>TEXT</li>						
<li>TEXT</li>						
<li>TEXT</li>						
<li>TEXT</li>					
</ul>				
</section>

<section>					
<h2></h2>				
</section>                               
 <div class="clear"></div>

<p>				
<strong>TEXT</strong>				
<br>				
TEXT TEXT TEXT</p>

<aside>					
<h3>Überschrift</h3>					
<p>TEXT TEXT TEXT					
<br><br>					
TEXT					
<br><br>					
TEXT</p>					
<img src="img/signature.jpg" alt="Unterschrift">					
<br>					
<small><?php echo $city; ?>, 14.08.2006</small>				
</aside>
			</div>
		</div>

Alles anzeigen

CSS

* {	margin:0;	padding:0;	text-decoration:none;	list-style:none;}
body {	font-family:"Droid Sans", sans-serif;	background:#efefef;}
h1, h2, h3 {	color:#477aa9;}
.clear {	float:none;	clear:both;}
.flow-img {	float:right;}
.container {	width:90%;	min-width:520px;	max-width:1000px;	margin:0 auto;	background:#fff;}
.wrapper-left {	float:left;	position:absolute;	width:280px;}
.wrapper-right {	float:right;	width:auto;	margin-left:280px;}
#center {	position:fixed;	bottom:0;	right:50px;	width:300px;	background:#23385e;	padding:20px;	border:6px solid #fff;	outline:2px solid #23385e;	border-bottom:none;	color:#fff;}
#center p {	font-size:11pt;}
#center img {	position:absolute;	top:10px;	right:10px;}
#center a {	color:#ffea00;	font-size:24pt;}
#center a:hover, #center a:focus {	text-decoration:underline;}
#gap {	height:40px;	background:#efefef;}
#gap p {	line-height:40px;	float:right;}
#gap p a {	color:#189356;	font-weight:bold;	margin:0 15px 0 0;}
#title {	height:140px;	width:100%;	background:#23385e;	position:relative;}
#title img {	height:140px;	width:280px;	float:left;	margin:0 20px 0 0;}
#title img:last-child {	position:absolute;	top:0;	right:10px;	height:140px;	width:auto;}
#title p {	color:#fff;	font-size:18pt;	padding:20px 0 0;}
#title p strong {	font-size:24pt;}
#title p small {	font-size:11pt;	line-height:50px;}
#header {	height:300px;	background:url(../img/header.jpg);	position:relative;}
#header ul {	float:right;	margin:0 20px 0 0;}
#header ul li {	margin:15px 0 0;	font-size:14pt;	text-align:right;}
#header ul li:before {	content:url(../img/check.png);	position:relative;	top:6px;	right:10px;}
a.tel {	position:absolute;	bottom:60px;	right:0;	background:#ffca08;	font-size:22pt;	padding:2px 20px;	color:#333;	display:inline-block;}
a.tel:hover, a.tel:focus {	text-decoration:underline;}
a.tel:before {	content:url(../img/tel.png);	position:relative;	top:4px;	right:10px;	margin:0 0 0 10px;}
#address {	width:280px;	background:#23385e;}
#address ul {	width:80%;	padding:10%;}
#address ul li {	color:#fff;	margin:30px 0;	font-size:11pt;	padding:0 0 0 40px;	line-height:25px;}
#address ul li a {	color:#fff;}
#address ul li a:hover, #address ul li a:focus {	text-decoration:underline;}
#address ul li:nth-child(1) {	border-bottom:1px solid #fff;	text-align:center;	padding:0 0 20px;	margin:5px 0 20px;}
#address ul li strong {	font-size:26pt;}
#address ul li:nth-child(2) {	background:url(../img/bg-sidebox1.png) 0 50% no-repeat;}
#address ul li:nth-child(3) {	background:url(../img/bg-sidebox2.png) 0 50% no-repeat;}
#address ul li:nth-child(4) {	background:url(../img/bg-sidebox4.png) 0 50% no-repeat;}
#custom {	padding:20px;}
#custom img {	display:block;	margin:20px auto;	width:160px;}
nav {	position:relative;	top:-40px;}
nav ul li a {	float:left;	width:30%;	text-align:center;	color:#ddd;	line-height:40px;	background:#23385e;}
nav ul li:nth-child(2) a {	width:40%;}
nav ul li a:hover, nav ul li a:focus {	text-decoration:underline;	color:#fff;}
nav ul li a.active {	background:#fff;	color:#666;}
nav ul li a.active:hover, nav ul li a.active:focus {	text-decoration:none;}
#main {	padding:0 5% 40px;	min-height:1000px;}
#main h1 {	border-bottom:1px solid #999;	padding:0 0 5px;	margin:0 0 20px;	font-size:16pt;}
#main a.tel {	position:inherit;}
#main p span {	font-size:15pt;}
#main p strong {	font-size:16pt;	color:#555;}
#main ul li {	font-size:12pt;	margin:0 0 5px 10px;	list-style:square;}
#main section {	float:left;	width:50%;	margin:20px 0 0;}
#main section iframe {	height:270px;	width:100%;}
#main section img {	width:100%;}
#main h2 {	font-size:18pt;	font-weight:normal;}
#main section h2 {	padding:10px 0;}
#main section p {	padding:20px;	font-size:15pt;	line-height:32px;}
#main section ul {	padding:20px;}
#main section ul li {	font-size:15pt;	margin:0 0 5px 10px;	list-style:square;}
#main aside {	margin:30px 0;	padding:20px;	background:#eee;	border:5px dashed #ffca08;}
#main aside h3 {	margin:0 0 15px;	font-size:18pt;	font-weight:normal;}
#main aside p {	font-size:11pt;}
#main aside small {	color:#999;}
#footer {	background:#efefef;	line-height:80px;	text-align:center;}
/* ______________________ Table ______________________ */
.table-container {	margin:20px 0 0;}
.table-container table {	width:100%;	font-size:13pt;}
.table-container table th, .table-container table td {	text-align:left;	vertical-align:top;	padding:2px 4px;}
.table-container table tr:nth-child(odd) {	background:#dae1e6;}
.table-container p {	margin-top:20px;	font-size:9pt;}
.small table {	width:48%;	margin-right:2%;	float:left;	margin-bottom:30px;}
.small:last-child table {	margin-left:2%;	margin-right:0;}
/* ______________________ Media Query @ Medium ______________________ */
@media only screen and (min-width:1px) and (max-width:1000px) {
#title img:last-child {	display:none;}
}
/* ______________________ Media Query @ Small ______________________ */
@media only screen and (min-width:1px) and (max-width:800px) {
.container {	width:90%;	min-width:300px;	max-width:600px;}
.flow-img {	width:30%;}
#gap {	height:10px;}
#gap p {	display:none;}
#title p, #title small, #title img:last-child {	display:none;}
#center {	width:180px;	padding:8px 10px;}
#center img {	width:60px;	top:5px;	right:5px;}
#center p {	font-size:21pt;	padding:0 70px 0 0;}
#center p span {	display:none;}
#center a {	font-size:13pt;}
#header {	background:#23385e;	height:90px;}
#header ul {	display:none;}
#header a {	position:static;	width:100%;	line-height:36px;	margin:-8px 0 0;	text-align:center;	padding:10px 0;}
.wrapper-left {	float:none;	width:100%;	position:inherit;}
.wrapper-right {	float:none;	width:100%;	margin:0;}
#title {	background:#fff;	border-bottom:10px solid #23385e;}
#title img {	height:140px;	width:280px;	display:block;	float:none;	margin:0 auto;}
#address {	width:100%;}
#main {	padding:20px;}
#main section {	width:100%;}
#main section img {	width:100%;	margin:0 auto;	padding:0;}




}

Alles anzeigen

Stef · 3. August 2016

Hey,

Dein Code ist nicht so übersichtlich gestaltet aber nagut. Erstmals die Fehler korrigieren:

- siehe "" bei <a href="">...</a>
-im css die } ganz zum schluss

Warum beendest du das div der navi erst am ende nach main ? Gehört die navi zu main dazu oder wie hast du es geplant?

Hier habe ich mal ein Dropdownmenu (nicht anhand deiner seite):

HTML

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="UTF-8">
    	<title>Dropdown Menu</title>

    	<link href="style.css" rel="stylesheet">
	</head>
<body>
	<div id="navi">
    	<nav>
        	<ul class="over">
            	<li><a href="#">Menüpunkt1</a></li>
            	<li class="mp2"><a href="name.php">Menüpunkt2</a>
                	<ul class="under">					
                    	<li><a href="#">Unterpunkt1</a></li>	<li><a href="#">Unterpunkt2</a></li>	<li><a href="#">Unterpunkt3</a></li>					
                	</ul>					
            	</li>	
        	</ul>
    	</nav>
	</div>	

</body>
</html>

Alles anzeigen

CSS

*{
	margin: 0px; padding: 0px; font-family: Verdana, sans-serif;
}




div#navi{
	text-align: center;
}







ul.over li{
	width: 300px;
	height: 30px;
	background-color: blue;
	display: inline-block;
	float:left;
	padding: 20px;
}




ul.over li a{
	color:white;
	text-decoration: none;
	padding: 30px 120px;
	position: relative;
	left:-20px;

}




ul.under{
	margin-top: 21px;
	position: relative;
	top: 10px;
	left: -20px;
}




ul.under li{
	padding: 20px;
	background-color: black;
	display:none;
}




ul.under li a{
	padding-top: 20px;
	position: relative;
	top: 0px;
	left: -20px;
}




ul.under li a:hover{
	background-color: aqua;
	color: black;
}




ul.over li a:hover{
	background-color: yellow;
	color: black;
}




ul.over li:hover ul.under li
{
	display: block;
}

Alles anzeigen

Habe mal so wie ich es machen würde deine seite nachgestellt , mit dropdown usw.. :

HTML

<html>
	<head>
    	<meta charset="UTF-8">
    	<title>Dropdown</title>

    	<link href="style.css" rel="stylesheet">
	</head>
<body>
	<div id="navi">
    	<nav>
        	<ul class="over">
            	<li><a href="#" class="active">Menüpunkt1</a></li>
            	<li class="mp2"><a href="#">Menüpunkt2</a>
                	<ul class="under">					
                    	<li><a href="#">Unterpunkt1</a></li>					
                    	<li><a href="#">Unterpunkt2</a></li>					
                    	<li><a href="#">Unterpunkt3</a></li>					
                	</ul>					
            	</li>					
                	<li><a href="#">Menüpunkt3</a></li>				
        	</ul>			
    	</nav>
	</div>
	<!--	 zum clearen der float -->		                           	
 <div class="clear"></div>
<div id="main">
<section>
	<h1>Überschrift</h1>				

	<img src="img/bild.jpg" alt="Text" class="flow-img">				
	<p>TEXT TEXT TEXT</p>								
	<a href="tel:Nummer" class="tel">Nummer</a>					<p>TEXT TEXT</p>				
</section>							
<section>					
<h2>Überschrift</h2>					
<img src="img/bild.jpg" alt="TEXT">					
<ul>						
<li>TEXT</li>						
<li>TEXT</li>						
<li>TEXT</li>						
<li>TEXT</li>						
<li>TEXT</li>					
</ul>
	<p>				
<strong>TEXT</strong>				
<br>				
TEXT TEXT TEXT</p>
</section>







				
<aside>					
<h3>Überschrift</h3>					
<p>TEXT TEXT TEXT</p>					
<img src="img/signature.jpg" alt="Unterschrift">								
<small><?php echo $city; ?>, 14.08.2006</small>				
</aside>
 	<div class="clear"></div>
		</div>	
	</body>
</html>

Alles anzeigen

CSS

*{
	margin: 0px;
	padding: 0px;
	font-family: Verdana, sans-serif;
}
div#navi{
	text-align: center;
	width: 100%;
	height: 70px;
	background-color: blue;
}







ul.over li{
	width: 300px;
	height: 30px;
	background-color: blue;
	display: inline-block;
	float:left;
	padding: 20px;
}




ul.over li a{
	color:white;
	text-decoration: none;
	padding: 30px 120px;
	position: relative;
	left:-20px;

}




ul.under{
	margin-top: 21px;
	position: relative;
	top: 10px;
	left: -20px;
}




ul.under li{
	padding: 20px;
	background-color: black;
	display:none;
}




ul.under li a{
	padding-top: 20px;
	padding-bottom: 31px;
	position: relative;
	top: 0px;
	left: -20px;
}




ul.over li a:hover{
	background-color: yellow;
	color: black;
}




ul.under li a:hover{
	background-color: aqua;
	color: blue;
}




ul.over li:hover ul.under li
{
	display: block;
}




div.clear {	
	float:none;	
	clear:both;
}




div#main{
	padding-top: 30px;
	height: 100%;
}




#main h1,h2,h3{
	color: blue;
	margin-bottom: 10px;
}




#main img{
	float:left;
	width: 200px;
	height: 120px;
	padding-right: 10px;
	padding-top: 10px;
}




#main section
{
	margin-bottom: 100px;
	margin-left: 10px;
}




#main a{
	color: gold;;
	text-decoration: none;
	padding: 10px;
	margin: 5px;
	background-color: black;
	float:right;
	border-radius: 10px;
	font-weight: bold;
}




#main li{
	list-style-type: none;
}




#main aside
{
	margin-top: -70px;
    	margin-left: 10px;
}




#main small
{
	position: relative;
	top: 140px;
	left: -100px;
}




#main a:hover
{
	background-color: aqua;
	color:black; 
}

Alles anzeigen

Bei Fragen einfach fragen

Gruß,
Stef

DropDown Menü Probleme bei CSS

Jetzt mitmachen!

Teilen