Hallo, bin ein Neueinsteiger im Webdesign und hab auch schon gleich mein erstes Problem mit meiner dropdown Navigation. Ich fang zuerst einmal mit meinem Code an.
HTML-Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<link href="teststyle2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<nav>
<ul id="main">
<li>Menue
<ul class="sub1">
<li><a href="#">Menue1</a>
<ul class="sub2">
<li><a href="#">Menue1.1</a>
<ul class="sub3">
<li><a href="#">Menue1.1.1</a></li>
<li><a href="#">Menue1.1.2</a></li>
<li><a href="#">Menue1.1.3</a></li>
<li><a href="#">Menue1.1.4</a></li>
</ul>
</li>
</ul>
<ul class="sub2">
<li><a href="#">Menue1.2</a></li>
</ul>
<ul class="sub2">
<li><a href="#">Menue1.3</a>
<ul class="sub3">
<li><a href="#">Menue1.3.1</a></li>
<li><a href="#">Menue1.3.2</a></li>
<li><a href="#">Menue1.3.3</a></li>
<li><a href="#">Menue1.3.4</a></li>
</ul>
</li>
</ul>
<ul class="sub2">
<li><a href="#">Menue1.4</a>
<ul class="sub3">
<li><a href="#">Menue1.4.1</a></li>
<li><a href="#">Menue1.4.2</a></li>
<li><a href="#">Menue1.4.3</a></li>
<li><a href="#">Menue1.4.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menue2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Code:
ul#main, .sub1, .sub2, .sub3 {
list-style-type: none;
}
ul#main li {
width: 160px;
text-align: left;
position: relative;
margin-right: 4px;
}
ul#main a {
text-decoration: none;
display: block;
width: 150px;
height: 18px;
line-height: 18px;
background-color: white;
border: 1px solid red;
border-radius: 5px;
color: black;
}
ul#main li:hover > a {
background-color: #CFC;
}
ul#main li:hover a:hover {
background-color: #FF0;
}
ul#main ul.sub1 {
display: none;
position: relative;
top: 0px;
left: -40px;
}
ul#main li:hover .sub1 {
display: block;
}
ul#main ul.sub2 {
display: none;
position: relative;
top: -20px;
left: 120px;
}
ul#main .sub1 li:hover .sub2 {
display: block;
}
ul#main ul.sub3 {
display: none;
position: relative;
top: -20px;
left: 120px;
}
ul#main .sub2 li:hover .sub3 {
display: block;
}
Wenn man über "Menue1" hovert und sich das Submenü "Menue1.1-1.4" öffnet schieben sich die Menüpunkte "Menue1" und "Menue2" auseinander, was es unmöglich macht "Menue2" zu erreichen, dasselbe passiert auch im Submenü. Es soll am besten keine Lücke entstehen sobald sich die Submenüs öffnen. Ich habe schon versucht die Positioniereung der Submenüs von relative auf absolute zu ändern doch dann liegen die einzelnen Submenüpunkte übereinander. Ich hoffe ich habe mein Problem einigermaßen verständlich erklärt und freue mich über jede hilfreiche Antwort.