Пункты подменю не отображаются в навигации

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;
  
}

.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.header:hover .dropbtn {
  background-color: #00b5cc;
}


.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.header:hover .dropdown-content {
  display: block;
}

.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.sub-menu{
  list-style-type: none;
  display:none;
}

.dropdown-content:hover .submenu{
 background-color: red;
}

<ul class = "header">
<li>
    <a class = "dropbtn ">
    Apparel
    </a>  
    <ul class = "dropdown-content">
    <li>
         <a>Girls
             <ul class = "sub-menu">
         <li><a>Shoes</a></li>
         <li><a>Pants</a></li>
         <li><a>Skirts</a></li>
         <li><a>Tops</a></li>
         </ul>
         </a>
         </li>
   </ul>
       
</li> 
</ul>

Я новичок в css и хочу создать панель навигации. Когда я нажимаю на раздел "Одежда", появляется раздел "Девушка". Но когда я нажимаю на раздел для девочек, подпункты не отображаются. Я хочу отображать элементы меню при наведении курсора на раздел для девочек. Может кто-нибудь мне в этом поможет. Я не могу понять.

переместите их из якоря девочек, они просто должны быть вложены в li (а вложенные якоря - недопустимый код)

— 17.09.2018 15:22

html css

17.09.2018 14:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пожалуйста, попробуйте этот код

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;

}

.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.header:hover .dropbtn {
  background-color: #00b5cc;
}


.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.header:hover .dropdown-content {
  display: block;
}

.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.sub-menu{
  list-style-type: none;
  display:none;
}

.dropdown-content:hover .submenu{
 background-color: red;
}
.dropdown-content li:hover .sub-menu { display: block; }

HTML: -

<ul class = "header">
<li>
    <a class = "dropbtn ">
    Apparel
    </a>  
    <ul class = "dropdown-content">
    <li>
         <a>Girls</a>
             <ul class = "sub-menu">
         <li><a>Shoes</a></li>
         <li><a>Pants</a></li>
         <li><a>Skirts</a></li>
         <li><a>Tops</a></li>
         </ul>

         </li>
   </ul>

</li> 
</ul>

пожалуйста, объясните, что вы сделали, и не просто вставляйте код, попробуйте это

— 17.09.2018 15:23

Я стараюсь и позволю тебе немедленно

— 17.09.2018 17:00

17.09.2018 15:01

Ответ принят как подходящий

Теперь вы забыли перейти к классу подменю. Подменю также забудьте о display: block; Пожалуйста, попробуйте следующий код для хорошего дизайна.

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;      
}
.header ul {
  padding: 0;
}
.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
  display: inline-block;
}
.header:hover .dropbtn {
  background-color: #00b5cc;
}
.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content li a:hover {
  background-color: #ddd;
}
.header:hover .dropdown-content {
  display: block;
}
.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}
.sub-menu{
  list-style-type: none;
  display:none;
}
.dropdown-content:hover .sub-menu{
 background-color: red;
 display: block;
}

<ul class = "header">
  <li>
    <a class = "dropbtn ">Apparel</a>  
    <ul class = "dropdown-content">
      <li>
        <a>Girls</a>
          <ul class = "sub-menu">
            <li><a>Shoes</a></li>
            <li><a>Pants</a></li>
            <li><a>Skirts</a></li>
            <li><a>Tops</a></li>
          </ul>            
      </li>
    </ul>
  </li>
</ul>

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

— 17.09.2018 15:17

17.09.2018 15:05