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>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;}
}