Wie wird das Dropdown-Menü richtig angezeigt?

Question

Ich weiß nicht, wie viel von diesem Code ist notwendig, um Sie zu zeigen, aber ich kann ehrlich gesagt nicht herausfinden, wie ich mein Problem beheben, damit ich nur alles auflisten. Ich habe ein Dropdown-Menü für meine mobile Version meiner Website, die fast abgeschlossen ist. So sieht es aus, wenn ich das Menü hochfahre (Menü div):

Home 
About 
Contact 

Mein Problem ist jetzt die Untermenüs. Wenn ich darauf klicken sehe ich so etwas wie dieses (leeren Raum an der Spitze der li ul und Artikel nächsten Menü vertuscht):

Home 
         <---empty space 
    My dropdown li 
    My dropdown li 2 
    My dropdown li 3 
Contact 

Ich habe mit Margen versucht, Messing, habe ich versucht, zu ändern um Display-Typen, Ich habe versucht, Positionstypen zu ändern ... Der nächste, den ich habe, um es richtig zu funktionieren ist, einen negativen Rand auf dem li ul zu verwenden, um den leeren Raum loszuwerden, aber es deckt immer noch das "ungefähr" ab. Ich verstehe einfach nicht, was ich tun kann, um das CSS zu reparieren! Jede Hilfe wird sehr geschätzt !!

$("#nav").addClass("js").before('<div id="menu">&#9776;</div>'); 
 
$("#menu").click(function() { 
 
    $("#nav").toggle(); 
 
}); 
 
$(window).resize(function() { 
 
    if (window.innerWidth > 768) { 
 
    $("#nav").removeAttr("style"); 
 
    } 
 
}); 
 

 
$('li.dropdown').click(function() { 
 
    $('li.dropdown').not(this).find('ul').hide(); 
 
    $(this).find('ul').toggle(); 
 
});

ul { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 51px; 
 
    left: 0 !important; 
 
    z-index: 100; 
 
} 
 
li ul { 
 
    display: block; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
li ul li {} li { 
 
    width: 33%; 
 
    float: left; 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 
li:last-child { 
 
    border-right: none; 
 
} 
 
li a { 
 
    display: block; 
 
    background: #879270; 
 
    padding: 4% 10%; 
 
    font-size: 1.35em; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    text-align: left; 
 
    color: #000000 !important; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    #menu { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (max-width: 768px) { 
 
    #menu { 
 
    width: 1.4em; 
 
    display: block; 
 
    background: #879270; 
 
    font-size: 1.35em; 
 
    text-align: center; 
 
    position: absolute; 
 
    z-index: 1000; 
 
    top: 15px; 
 
    right: 10px; 
 
    border-radius: 3px; 
 
    border: 1px solid #000000; 
 
    padding-top: 5px; 
 
    } 
 
    #nav.js { 
 
    display: none; 
 
    } 
 
    ul { 
 
    width: 100%; 
 
    } 
 
    li { 
 
    width: 100%; 
 
    border-right: none; 
 
    } 
 
} 
 
li.dropdown ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<ul id="nav"> 
 
    <li class="dropdown"><a href="#">Home</a> 
 
    <ul> 
 
     <li><a href="#">My Dropdown li</a> 
 
     </li> 
 
     <li><a href="#">My Dropdown li 2</a> 
 
     </li> 
 
     <li><a href="#">My Dropdown li 3</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul>

Answer 1

hava Sie top Wert (top: 51px;) auf ul die auf Ihre Untermenüs erbt. Fügen Sie top: 0; zu li ul hinzu, so dass es nicht in Untermenüs vererbt wird.

ul { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 51px; 
 
    left: 0 !important; 
 
    z-index: 100; 
 
} 
 

 
li ul { 
 
    display: block; 
 
    width: 100%; 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
li ul li {} 
 

 
li { 
 
    width: 33%; 
 
    float: left; 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    background: #879270; 
 
    padding: 4% 10%; 
 
    font-size: 1.35em; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    text-align: left; 
 
    color: #000000 !important; 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    #menu { 
 
    display: none; 
 
    } 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    #menu { 
 
    width: 1.4em; 
 
    display: block; 
 
    background: #879270; 
 
    font-size: 1.35em; 
 
    text-align: center; 
 
    position: absolute; 
 
    z-index: 1000; 
 
    top: 15px; 
 
    right: 10px; 
 
    border-radius: 3px; 
 
    border: 1px solid #000000; 
 
    padding-top: 5px; 
 
    } 
 
    #nav.js { 
 
    display: none; 
 
    } 
 
    ul { 
 
    width: 100%; 
 
    } 
 
    li { 
 
    width: 100%; 
 
    border-right: none; 
 
    } 
 
} 
 

 
li.dropdown ul { 
 
    display: none; 
 
}

<ul id="nav"> 
 
    <li class="dropdown"><a href="#">Home</a> 
 
    <ul> 
 
     <li><a href="#">My Dropdown li</a></li> 
 
     <li><a href="#">My Dropdown li 2</a></li> 
 
     <li><a href="#">My Dropdown li 3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul> 
 

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    $("#nav").addClass("js").before('<div id="menu">&#9776;</div>'); 
 
    $("#menu").click(function(){ 
 
     $("#nav").toggle(); 
 
    }); 
 
    $(window).resize(function(){ 
 
     if(window.innerWidth > 768) { 
 
      $("#nav").removeAttr("style"); 
 
     } 
 
    }); 
 

 
    $('li.dropdown').click(function() { 
 
    $('li.dropdown').not(this).find('ul').hide(); 
 
    $(this).find('ul').toggle(); 
 
}); 
 
</script>