Gap появляется в панели навигации и выпадающем списке я не могу

Question

1. решить «пробел», который появляется ниже мои навигационными вкладки
2. Также может кто-то пожалуйста, помогите мне с ниспадающим навигации? Мне нужно поставить 3 подзаголовка под SHOP, 2 подзаголовка под DISCOVER и 3 подзаголовки под EDGE CLUB. Я слишком смущен с несколькими < li> и < ul>!

Это мой первый раз, и заранее спасибо ...

.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

Встроенные элементы автоматически имеют пространство вокруг них применяются. Поскольку ul-menu определяется как inline-block, он получает эту обработку. Это пространство является зазором под вкладками.

Чтобы удалить место, измените код display на номер block, а затем вы можете установить его с помощью width и margin:auto.

---

Что касается подзаголовков, вам нужно будет вложить списки и применить аналогичные стили. Here's a good example.

Answer 2

Вы можете установить display: inline-flex для ul.menu

Answer 3

(1) вот JSFiddle: https://jsfiddle.net/51ueowx7/1/

там было только два обновления для CSS, чтобы удалить проблемы, вызванные пробелами

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

Возможный обман: How to remove the space between inline-block elements?

(2)

Первым шагом, который я бы предпринял, было бы удаление якорей. Учитывая, что вы не хотите, чтобы каждый клик переходил на другую страницу, скорее всего, было бы предпочтительным назначить обработчики кликов.

Вы уже достаточно знакомы со списками, чтобы иметь возможность их гнезда, я считаю, немного форматирования будет значительно полезно в этом сценарии:

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

начать вы, вероятно, хотите:

ul.shop-subheadings{ 
    display: none; 
} 

Затем вы можете добавлять/использовать классы || Идентификаторы, чтобы назначить функцию щелчка.

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

Вот грубый старт: https://jsfiddle.net/51ueowx7/8/