Блог

Главная - Вопросы по программированию - Выпадающее меню HTML / CSS не накладывается и не отображается в блоке

Выпадающее меню HTML / CSS не накладывается и не отображается в блоке

#html #css #dropdown

#HTML #css #выпадающий

Вопрос:

Возникли некоторые проблемы с корректным отображением выпадающего меню при наведении курсора мыши; в настоящее время оно отображает все в одной строке, а также, похоже, не перекрывается, несмотря на то, что z-index установлен в 1. Поиграл с созданием проектов в p, a и div, но все равно зашел в тупик. Любой совет?

HTML

 <html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <nav class="navbar">
        <a href="/" id="name-link">Name</a>
        <div class="dropdown">
            <a>Projects</a>
                <div class="dropdown-content">
                    <a href="/">Project 1</a>
                    <a href="/">Project 2</a>
                    <a href="/">Project 3</a>
                </div>
        </div>
        <a href="/about.html">About</a>
        <a href="/">Contact</a>
    </nav>
</body>
</html>

CSS

 body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: .015em;
    color: #000000;
}

a:link, a:visited {
    color: #000000;
    text-decoration: none;
}

a:hover, a:active {
    color: #a9c4d4;
    text-decoration: underline;
}

.navbar {
    overflow: hidden;
    font-size: 2.5em;
    font-weight: 700;
    position: fixed;
    top: 0;
    width: 100%;
    list-style-type: none;
    margin: 0px 0px 0px 110px;
    padding: 10px 0px 10px 0px;
    background-color: #ffffff;
}

.navbar a {
    float: left;
    display: block;
    margin: 10px;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    z-index: 1;
}

.dropdown-content a {
    float: none;
    margin: 10px;
    display: block;
    text-align: left;
}

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

#name-link {
    color: #a9c4d4;
    text-decoration: none;
}

a.selected-link {
    text-decoration: underline;
}

jsfiddle здесь: https://jsfiddle.net/29gev50b/2 /

Ответ №1:

измените css «выпадающего содержимого». Абсолютная позиция делает это. удалите эту позицию абсолютного css из «выпадающего содержимого», и она будет работать нормально.

Комментарии:

1. Изменение этой решенной части проблемы: меню теперь отображается в блоке и правильно расположено в разделе «проекты». Однако меню по-прежнему не перекрывает остальную часть панели навигации и основного содержимого div. При расширении меню остальная часть текста навигационной ссылки также перемещается вправо.

2. удалить переполнение: скрыто для .navbar. И добавьте top: 70px (вы можете указать любое значение для top в соответствии с потребностями вашего дизайна), background: #ddd (укажите желаемый цвет фона.). надеюсь, это решит все проблемы. примечание: для этих изменений не удаляйте абсолютную позицию для «выпадающего содержимого».

3. это сработало! хотя я отмечу, что я добавил top:70px в .dropdown-content, а не .navbar

Ответ №2:

Вы не оставили достаточно места в своем navbar контейнере div для расширения меню, поэтому оно отключается. z-index не будет работать, потому что поле (div) недостаточно велико.

Добавьте min-height: 100px; в свой navbar , чтобы исправить.

 body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .015em;
  color: #000000;
}

a:link,
a:visited {
  color: #000000;
  text-decoration: none;
}

a:hover,
a:active {
  color: #a9c4d4;
  text-decoration: underline;
}

.navbar {
  overflow: hidden;
  font-size: 2.5em;
  font-weight: 700;
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0px 0px 0px 110px;
  padding: 10px 0px 10px 0px;
  min-height: 100px;
  background-color: #ffffff;
}

.navbar a {
  float: left;
  display: block;
  margin: 10px;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  margin: 10px;
  display: block;
  text-align: left;
}

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

#name-link {
  color: #a9c4d4;
  text-decoration: none;
}

a.selected-link {
  text-decoration: underline;
}  
 <html>

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <nav class="navbar">
    <a href="/" id="name-link">Name</a>
    <div class="dropdown">
      <a>Projects</a>
      <div class="dropdown-content">
        <a href="/">Project 1</a>
        <a href="/">Project 2</a>
        <a href="/">Project 3</a>
      </div>
    </div>
    <a href="/about.html">About</a>
    <a href="/">Contact</a>
  </nav>
</body>

</html>