Блог

Главная - Вопросы по программированию - Почему мое выпадающее меню не работает? (HTML и CSS)

Почему мое выпадающее меню не работает? (HTML и CSS)

#html #css

Вопрос:

Проблема: Я новичок в HTML и CSS, и мне нужна помощь с выпадающим меню. Я следил за учебниками на YouTube, но повторяется та же проблема. После того, как я наведу курсор мыши на элемент «Категории», функция наведения не работает.

 nav {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 30%);
  align-items: center;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 40%;
}

nav ul li {
  display: inline-block;
  line-height: 40px;
  margin-top: 15px;
}

nav ul li a {
  padding: 13px 10px;
  background: rgba(0, 0, 0, 20%);
  color: white;
}

nav ul ul {
  position: absolute;
  display: none;
}

nav ul li:hover>ul {
  display: block;
} 
 <div>
  <nav>
    <label class="logo">LOGO</label>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Categories</a></li>
      <ul>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
      </ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Ответ №1:

Это потому, что ваш HTML-код просто немного неверен. Ваш вложенный неупорядоченный список ( <ul> ) должен входить в элемент списка ( <li> ), но ваш находится за его пределами. Исправьте это, и, похоже, это сработает.

 nav {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 30%);
  align-items: center;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 40%;
}

nav ul li {
  display: inline-block;
  line-height: 40px;
  margin-top: 15px;
}

nav ul li a {
  padding: 13px 10px;
  background: rgba(0, 0, 0, 20%);
  color: white;
}

nav ul ul {
  position: absolute;
  display: none;
}

nav ul li:hover>ul {
  display: block;
} 
 <div>
  <nav>
    <label class="logo">LOGO</label>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Categories</a> <!-- remove the </li> you had here... -->
        <ul>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
        </ul>
      </li> <!-- ...and put it here -->
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
Метки: