Gap erscheinen in Navigationsleiste und Drop-Down-

Question

1. Ich kann nicht die ‚Lücke‘ scheinen zu lösen
2. auch unter meinem Navigations-Tab angezeigt wird, kann jemand mit einer Drop-Down-Navigation mir bitte helfen? Ich muss 3 Unterpositionen unter SHOP, 2 Unterpositionen unter DISCOVER und 3 Unterpositionen unter EDGE CLUB angeben. Ich bin zu verwirrt mit dem multiplen < li> und < ul>!

Dies ist mein erstes Mal und Dank im Voraus ...

.navigation { 
 
\t background-color: #454242; 
 
\t text-align:center; 
 
} 
 

 
ul.menu { 
 
\t height: 43px; 
 
\t background-color: #454242; 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
\t transition: 1.0s; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-weight:400; 
 
\t display:inline-block; 
 
\t text-align: center; 
 
} 
 

 
ul.menu li { 
 
\t float: left; 
 
\t display: inline; 
 
} 
 

 
ul.menu li a { 
 
\t display: inline-block; 
 
\t color: #FFFFFF; 
 
\t text-align: center; 
 
\t padding: 10px 20px; 
 
\t text-decoration: none; 
 
\t transition: 1.0s; 
 
\t font-size: 17px; 
 
\t height: 23px; 
 
} 
 

 
ul.menu li a:hover { 
 
\t background-color: #FFFFFF; 
 
\t color: black; 
 
} 
 

 
ul.menu li a:active { 
 
\t background-color: #FFFFFF; 
 
\t color: black; 
 
} 
 

 
ul.menu li.icon { 
 
\t display:none; 
 
} 
 

 
@media screen and (max-width: 680px) { \t 
 
ul.menu li:not(:first-child){ 
 
\t display:none; 
 
\t margin: auto; 
 
\t float: left; 
 
} 
 
\t 
 
ul.menu li.icon { 
 
\t display: inline; 
 
\t float: left; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t text-align: left; 
 
} 
 
} 
 

 
@media screen and (max-width: 680px) { 
 
\t 
 
ul.menu.responsive li.icon { 
 
\t 
 
\t float: left; 
 
\t position: absolute; 
 
\t text-align: left; 
 
\t color: black; 
 
} 
 
\t 
 
ul.menu.responsive{ 
 
\t position: relative; 
 
\t height: 258px; 
 
\t transition: 1.0s; 
 
\t width: 100% 
 
} 
 
\t 
 
ul.menu.responsive li{ 
 
\t float: none; 
 
\t display: inline; 
 
\t 
 
} 
 
\t 
 
ul.menu.responsive li a{ 
 
\t display:block; 
 
\t text-align: center; 
 
} \t 
 
}

<div class="navigation col-12"> 
 
<ul class="menu"> 
 
<li class="icon"> 
 
<a href="javascript:void(0);"onClick="dropdownMenu()">&#9776;</a></li> 
 
<li> <a href="test.html">Home</a></li> 
 
<li> <a href="test.html">Eat</a></li> 
 
<li> <a href="test.html">Shop</a></li> 
 
<li> <a href="test.html">Discover</a></li> 
 
<li> <a href="test.html">Edge Club</a></li> 
 
<li> <a href="test.html">Contact</a></li> 
 
</ul> 
 
</div> 
 

 
<script> 
 
function dropdownMenu() { 
 
\t document.getElementsByClassName("menu")[0].classList.toggle("responsive"); 
 
} 
 
</script>

Answer 1

Inline-Elemente automatisch hat Raum um sie herum angelegt. Weil ul-menu als inline-block definiert ist, erhält es diese Behandlung. Dieser Abstand ist die Lücke unter den Tabs.

Um den Platz zu entfernen, ändern Sie display zurück zu block und dann können Sie es mit width und margin:auto zentrieren.

---

Für Zwischenüberschriften müssen Sie Listen verschachteln und ähnliche Stile anwenden. Here's a good example.

Answer 2

können Sie display: inline-flex Set für ul.menu

Answer 3

(1) hier ein JSFiddle: https://jsfiddle.net/51ueowx7/1/

es nur zwei Aktualisierungen der CSS, um Leerzeichen

ul.menu{ 
    display: table; 
    margin: auto; 
} 

verursacht zu entfernen Probleme war

möglich dupe: How to remove the space between inline-block elements?

(2)

Der erste Schritt wäre, die Anker zu entfernen. Wenn Sie nicht möchten, dass jeder Klick zu einer anderen Seite navigiert, ist es wahrscheinlich vorzuziehen, Click-Handler zuzuweisen.

Sie sind bereits vertraut genug mit Listen Nest zu können, um sie, ich ein wenig Formatierung glauben in diesem Szenario deutlich hilfreich wäre:

<li id="shop"> 
    <p>Shop</p> 
    <ul class="shop-subheadings"> 
     <li>Subheading 1</li> 
     <li>Subheading 2</li> 
     <li>Subheading 3</li> 
    </ul> 
</li> 

Sie beginnen würde wahrscheinlich wollen:

ul.shop-subheadings{ 
    display: none; 
} 

Sie können dann Klassen hinzufügen/verwenden || IDs, um Klickfunktionalität zuzuweisen.

$("#shop").click(function(){ 
    $("ul.shop-subheadings").show(); 
}) 

Hier ist eine grobe Start: https://jsfiddle.net/51ueowx7/8/