• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Dropdownmenü

1

12Kukan

Mitglied
Hallo Zusammen,

ich habe ein Problem mit meinem Dropdownmenü. Undzwar kommt es nur halb raus. Ich habe ihm ein paar Kategorien zugeordnetund ein paar dieser Kategorien habe ich unterkategorienen gegeben. Diese Unterkategorien kommen nicht raus.
Hier ist mein komplettes Menü:
HTML: 
<nav>
<ul>
    <li class="first">
        <a href="" title="HTML">HTML</a>
        <ul>
            <li class="first"><a href="" title="Was ist HTML?">Was ist HTML?</a></li>
            <li><a href="" title="Wof&uuml;r steht HTML?">Wof&uuml;r steht HTML?</a></li>
            <li><a href="" title="Wof&uuml;r wird HTML verwendet?">Wof&uuml;r wird HTML verwendet?</a></li>
            <li class="last"><a href="" title="Wie ist HTML aufgebaut/strukturiert?">Wie ist HTML aufgebaut/strukturiert?</a></li>
        </ul>
    </li>
    <li>
        <a href="" title="CSS">CSS</a>
        <ul>
            <li class="first"><a href="" title="Was ist CSS?">Was ist CSS?</a></li>
            <li><a href="" title="Wof&uuml;r steht CSS?">Wof&uuml;r steht CSS?</a></li>
            <li><a href="" title="Wof&uuml;r wird CSS verwendet?">Wof&uuml;r wird CSS verwendet?</a></li>
            <li class="last"><a href="" title="Wie ist CSS aufgebaut/strukturiert?">Wie ist CSS aufgebaut/strukturiert?</a></li>
        </ul>
    </li>
    <li>
        <a href="" title="Javascript">Javascript</a>
        <ul>
            <li class="first"><a href="" title="Was ist Javascript?">Was ist Javascript?</a></li>
            <li><a href="" title="Wof&uuml;r steht Javascript?">Wof&uuml;r steht Javascript?</a></li>
            <li><a href="" title="Wof&uuml;r wird Javascript verwendet?">Wof&uuml;r wird Javascript verwendet?</a></li>
            <li class="last"><a href="" title="Wie ist Javascript aufgebaut/strukturiert?">Wie ist Javascript aufgebaut/strukturiert?</a></li>
        </ul>
    </li>
    <li class="last">
        <a href="" title="Sonstiges">Sonstiges</a>
        <ul>
            <li class="first"><a href="" title="C++">C++</a></li>
                <ul>
                    <li class="first"><a href="" title="Was ist C++?">Was ist C++?</a></li>
                    <li><a href="" title="Wof&uuml;r steht C++?">Wof&uuml;r steht C++?</a></li>
                    <li><a href="" title="Wof&uuml;r wird C++ verwendet?">Wof&uuml;r wird C++ verwendet?</a></li>
                    <li><a href="" title="Wie ist C++ aufgebaut/strukturiert?">Wie ist C++ aufgebaut/strukturiert?</a></li>
                    <li class="last"><a href="" title="Downloads">Downloads</a></li>
                </ul>
            <li><a href="" title="Der Rubik'S Cube'">Der Rubik'S Cube</a></li>
                <ul>
                    <li class="first"><a href="" title="Definitionen">Definitionen</a></li>
                    <li><a href="" title="Der 3x3x3 Cube">Der 3x3x3 Cube</a></li>
                        <ul>
                            <li><a href="" title="Anf&auml;ngermethode">Anf&auml;ngermethode</a></li>
                            <li><a href="" title="Fridrich Methode">Fridrich Methode</a></li>
                        </ul>
                    <li><a href="" title="Der 2x2x2 Cube">Der 2x2x2 Cube</a></li>
                        <ul>
                            <li><a href="" title="Anf&auml;ngermethode">Anf&auml;ngermethode</a></li>
                            <li><a href="" title="Fridrich Methode">Fridrich Methode</a></li>
                            <li><a href="" title="Ortega Methode">Ortega Methode</a></li>
                        </ul>
                    <li class="last"><a href="" title="Der 4x4x4 Cube">Der 4x4x4 Cube</a></li>
                </ul>
            <li><a href="" title="G&auml;stebuch">G&auml;stebuch</a></li>
            <li class="last"><a href="" title="Kontakt">Kontakt</a></li>
        </ul>
    </li>
</ul>
</nav>

Und hier der CSS Code dazu(Wo glaube ich das Problem liegt):
Code: 
nav {
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0;
    width: 100px;
    float: left;
    margin-top: 20px;
    margin-left: -106px;
    margin-right: 1200px;
}

nav ul {
    border: solid black 1px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:0;
    margin:0;
    z-index: 9;
    width: 200px;
    list-style: none;
    line-height: 2em;
    background-color: #152137;
    -moz-box-shadow: 5px 5px 10px #000;
    box-shadow: 5px 5px 10px #000;
}

nav a {
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 0 10px;
    color: #fff;
    font-family: Verdana,Helvetica,Arial,'Trebuchet MS',sans-serif;;
    font-size: 14px;
    text-decoration: none;
    text-align: left;
    z-index: 9;
}

nav ul ul ul ul, nav ul ul ul, nav ul ul, nav ul li:hover ul ul, nav ul ul li:hover ul ul {
    display: none;
}

nav ul li:hover ul, nav ul ul li:hover ul, nav ul ul ul li:hover ul {
    display: block;
}

nav li {
    position: relative;
}

nav ul ul, nav ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    z-index: 9;
}
nav li:hover {
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #52A4C7;
}

Tut mir Leid für die schlechte Erklärung, ich fands nicht so einfach zu erklären.

Grüße,
Kukan
 
Hallo,

nein, in deinem Quelltextauszug ist das Problem nicht sichtbar. Mit deinen Angaben ist dir leider nicht zu helfen. Poste mal einen Link zur Seite und mach' nähere Angaben, z. B. in welchen Browsern du das getestet hast.

Gruss

MrMurphy
 
Das ist fehlerhafter HTML-Code:

HTML: 
<li class="first"><a href="" title="C++">C++</a></li>
                <ul>
                    <li class="first"><a href="" title="Was ist C++?">Was ist C++?</a></li>
                    <li><a href="" title="Wof&uuml;r steht C++?">Wof&uuml;r steht C++?</a></li>
                    <li><a href="" title="Wof&uuml;r wird C++ verwendet?">Wof&uuml;r wird C++ verwendet?</a></li>
                    <li><a href="" title="Wie ist C++ aufgebaut/strukturiert?">Wie ist C++ aufgebaut/strukturiert?</a></li>
                    <li class="last"><a href="" title="Downloads">Downloads</a></li>
                </ul>
            <li><a href="" title="Der Rubik'S Cube'">Der Rubik'S Cube</a></li>

Die Unterliste müsste innerhalb des darüberliegenden <li>'s stehen. Also:

HTML: 
<li class="first"><a href="" title="C++">C++</a></li>
                <ul>
                    <li class="first"><a href="" title="Was ist C++?">Was ist C++?</a>
                    <li><a href="" title="Wof&uuml;r steht C++?">Wof&uuml;r steht C++?</a></li>
                    <li><a href="" title="Wof&uuml;r wird C++ verwendet?">Wof&uuml;r wird C++ verwendet?</a></li>
                    <li><a href="" title="Wie ist C++ aufgebaut/strukturiert?">Wie ist C++ aufgebaut/strukturiert?</a></li>
                    <li class="last"><a href="" title="Downloads">Downloads</a></li>
                </ul></li>
            <li><a href="" title="Der Rubik'S Cube'">Der Rubik'S Cube</a></li>

Und ggfs. noch den restlichen Code dahingehend anpassen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben