Мое выпадающее меню не работает должным образом, где я ошибаюсь?

ProgramBox

Мое выпадающее меню не работает должным образом, где я ошибаюсь?

Post author:admin
Запись опубликована:7 марта, 2023
Post category:Вопросы по программированию

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

Я новичок в веб-разработке, и я пытаюсь создать выпадающее меню.

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

Я хочу, чтобы оно отображалось под элементом «магазин». Я не понимаю, где я ошибаюсь.

 .nav {
  width: 100%;
  float: right;
}

.nav ul {
  /* it edits the list, list-style: none; removes the discs from the list items  */
  float: right;
  list-style-type: none;
  display: block;
  text-align: right;
}

.nav ul li {
  display: inline-block;
  margin: 20px 40px;
  padding: 0 10px 0 10px;
  text-align: center;
  position: relative;
  border: 2px solid gold;
}

.nav ul li a {
  /* edits the links- text-decoration: none; removes the underline others are obvious*/
  color: #000000;
  text-decoration: none;
  display: block;
}

.nav ul li ul li {
  /* navigation sub-options disappear when not hovered  */
  display: none;
  margin: 0;
  padding: 0;
  border: 2px solid greenyellow;
}

.nav ul li:hover ul li {
  /* navigation options appear when hover on elements */
  display: block;
}

 <div class="nav">
  <ul>
    <li><a href="#">Home</a></li>

    <li><a href="#">Shop</a>
      <ul>
        <li><a href="#">Products</a></li>
        <li><a href="#">Membership</a></li>
      </ul>
    </li>

    <li><a href="#">Blog</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Activity</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

Ответ №1:

Установите position: relative на магазин-ссылку и position: absolute на выпадающий список. Затем выровняйте выпадающее меню по верхнему, левому, нижнему, преобразуйте, что бы вы хотели.

При transform этом это будет выглядеть так:

 .link {
    position: relative;
}

.dropdown {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%)
}

1. Извините, но я новичок, как я могу выровнять выпадающий список по низу.

2. Как я уже сказал в своем ответе. Попробуйте этот фрагмент css. Установите класс «link» в ссылке и класс «dropdown» в выпадающем списке

Ответ №2:

Я думаю, что проблема в том, как вы организовали эти элементы. Лично, когда я создаю выпадающие меню, я использую <button> для каждого корня выпадающего меню. Это значительно упрощает стилизацию.

Затем, что я делаю, я помещаю основной текст в <h2> или <h3> и оформляю так, как я хочу, чтобы выглядела основная часть выпадающего списка. Все, что находится внутри выпадающего списка, может быть оформлено с помощью <button> настроек класса. Вот как я изменил ваш код, чтобы получить то, что, как я предполагал, вы искали.

Стиль CSS:

 .nav2 a {
    color: #000000;
    text-decoration: none;
    display: block;
}

.nav2 button {
    margin: 20px 40px;
    padding: 0 10px 0 10px;
    border: 0px;
    /* change this to the color you want the background of your website to be */
    background-color: white; 
    border: 2px solid gold;
    font-size: 0px;
}

.nav2 button:hover {
    display: inline-block;
    margin: 20px 40px;
    padding: 0 10px 0 10px;
    text-align: center;
    position: relative;
    background-color: white;
    border: 2px solid greenyellow;
    /* change this to the color you want the background of your website to be */
    background-color: white; 
    font-size: 16px;
}

h2 {
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
}

А затем тело HTML:

 <div class="nav2">

    <button>
        <h2><a href="#">Home</a></h2>
    </button>

    <button>
        <h2><a href="#">Shop</a></h2>
            <br><a href="#">Products</a>
            <br><a href="#">Membership</a>
    </button>
    
    <button>
        <h2><a href="#">Blog</a></h2>
    </button>
    
    <button>
        <h2><a href="#">News</a></h2>
    </button>
    
    <button>
        <h2><a href="#">Activity</a></h2>
    </button>
    
        <button>
        <h2><a href="#">Contact Us</a></h2>
    </button>
    
</div>

Конечный результат выглядел так

Надеюсь, мой ответ был полезен!!

1. Не за что извиняться! Я просто надеюсь, что смог помочь с проблемой. Ответы от Cela и Maroz также кажутся прекрасными! Просто используйте то, что вам проще всего реализовать и понять 🙂

Ответ №3:

Ваш CSS немного запутан, но чтобы заставить его работать, добавьте следующее:

 /* sub-nav option list */
.nav > ul > li > ul {
  position: absolute;
  margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
  left: -55px;
}

position: absolute «удаляет» элемент из контейнера, чтобы он не содержался в границе вашего родителя. Это позволит нам использовать left , right , bottom , top свойства CSS для позиционирования вспомогательной навигации.

margin-top используется здесь для удаления пересечения shop и sub-nav . Тем не менее, вы должны быть осторожны, увеличивая это значение больше, чем 1-2 пикселя, поскольку это создаст пустое пространство, и для отображения требуется наведение курсора на элементы sub-nav .

Вот рабочий фрагмент:

 .nav {
  width: 100%;
  float: right;
}

.nav ul {
  /* it edits the list, list-style: none; removes the discs from the list items  */
  float: right;
  list-style-type: none;
  display: block;
  text-align: right;
}

.nav ul li {
  display: inline-block;
  margin: 20px 40px;
  padding: 0 10px 0 10px;
  text-align: center;
  position: relative;
  border: 2px solid gold;
}

.nav ul li a {
  /* edits the links- text-decoration: none; removes the underline others are obvious*/
  color: #000000;
  text-decoration: none;
  display: block;
}

/* sub-nav option list */
.nav > ul > li > ul {
  position: absolute;
  margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
  left: -55px;
}

.nav ul li ul li {
  /* navigation sub-options disappear when not hovered  */
  display: none;
  margin: 0;
  padding: 0;
  border: 2px solid greenyellow;
}

.nav ul li:hover ul li {
  /* navigation options appear when hover on elements */
  display: block;
}

 <div class="nav">
  <ul>
    <li><a href="#">Home</a></li>

    <li><a href="#">Shop</a>
      <ul>
        <li><a href="#">Products</a></li>
        <li><a href="#">Membership</a></li>
      </ul>
    </li>

    <li><a href="#">Blog</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Activity</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

Расположите документы для лучшего объяснения absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position

1. @FictionBelt Также прочитайте комментарий к margin-top тому, что если расстояние между вспомогательным навигатором и shop слишком велико, это остановит наведение курсора, в результате чего вспомогательный навигатор исчезнет. Кроме того, будьте осторожны с тем, как это меню будет выглядеть на мобильных устройствах, поскольку мы используем абсолютное позиционирование. Добрый день 🙂

2. Я использовал границы только для справки.

Ответ №4:

Здесь у вас есть:

 .nav{
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.nav ul{
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav ul li{
    background-color: gold;
    border: 1px solid gold;
    color: #FFF;
}
.nav ul li:hover{ 
    background-color: #FFF;
    color: gold; 
}
.nav ul li a{
    padding: 1rem 2rem;
    color: inherit;
    text-decoration: none;
    font-family: Verdana;
}
.nav ul li ul {
    /* navigation sub-options disappear when not hovered  */
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    margin: 0;
    padding: 0;
    border: 2px solid greenyellow;
}
.nav ul li:hover ul {
    /* navigation options appear when hover on elements */
    display: flex;
    opacity: 1;
    visibility: visible;
}

 <div class="nav">
    <ul>
        <li><a href="#">Home</a></li>

        <li><a href="#">Shop</a>
            <ul>
                <li><a href="#">Products</a></li>
                <li><a href="#">Membership</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Activity</a></li>
        <li><a href="#">Contact US</a></li>
    </ul>
</div>