Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 26.10.2013, 15:20
sliders4523 sliders4523 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2013
Beiträge: 1
sliders4523 befindet sich auf einem aufstrebenden Ast
Frage Problem mit vertikalem Drop Down Menue

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.

Geändert von sliders4523 (27.10.2013 um 03:03 Uhr)
Mit Zitat antworten
Sponsored Links