zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit vertikalem Drop Down Menue

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.10.2013, 16:20
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 04:03 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
dropdown, menü, navigation, problem, submenu, vertikal

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS drop down menu ul li komme nicht weiter. boogy CSS 0 25.10.2012 15:53
CSS Drop Down Menü gachet CSS 9 08.11.2009 19:36
Drop Down zestückelt... Darkness1 (X)HTML 1 19.10.2009 10:41
Drop Down navi und CSS caos CSS 8 20.09.2006 20:28
CSS Drop Down Einblenden geht nicht Flo01 CSS 3 16.04.2005 20:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:55 Uhr.