Почему все мои элементы отображаются в одном и том же месте при наведении курсора?

Я хотел бы создать главное меню. Я создал это, чтобы компоненты стали видимыми, когда они должны, но моя проблема в том, что я не знаю, как заставить отображать каждый menu-sub-item меню под наведенной кнопкой.

body {
  margin: 0
}

.menu {
  height: 20px;
  width: 100vw;
}

.menu-main-item:hover+.menu-sub-item {
  display: flex;
  position: absolute;
  top: 20px;
}

.menu-sub-item {
  display: none;
  z-index: 1;
  flex-direction: column;
}

.menu-sub-item:hover {
  display: flex;
  position: absolute;
  top: 20px;
}
<div class="menu">
  <button class="menu-main-item">This is 1</button>
  <div class="menu-sub-item">
    <button>Sub 1.1</button>
    <button>Sub 1.2</button>
    <button>Sub 1.3</button>
  </div>
  <button class="menu-main-item">Ok 2</button>
  <div class="menu-sub-item">
    <button>Sub 2.1</button>
    <button>Sub 2.2</button>
    <button>Sub 2.3</button>
  </div>
  <button class="menu-main-item">Another 3</button>
  <div class="menu-sub-item">
    <button>Sub 3.1</button>
    <button>Sub 3.2</button>
    <button>Sub 3.3</button>
  </div>
</div>

Всего 2 ответа


Оберните ваш пункт меню в div и затем поместите его влево, Готово

body {
  margin: 0
}

.menu {
  height: 20px;
  width: 100vw;
}
.menu .menuitem{
  float:left;
  margin-left:20px;

}
.menu-main-item:hover+.menu-sub-item {
  display: flex;
  position: absolute;
  top: 20px;
}

.menu-sub-item {
  display: none;
  z-index: 1;
  flex-direction: column;
  
}

.menu-sub-item:hover {
  display: flex;
  position: absolute;
  top: 20px;
}
<div class="menu">
  <div class="menuitem">
    <button class="menu-main-item">This is 1</button>
    <div class="menu-sub-item">
      <button>Sub 1.1</button>
      <button>Sub 1.2</button>
      <button>Sub 1.3</button>
    </div>
   </div>
  <div class="menuitem">
    <button class="menu-main-item">Ok 2</button>
    <div class="menu-sub-item">
      <button>Sub 2.1</button>
      <button>Sub 2.2</button>
      <button>Sub 2.3</button>
    </div>
  </div>
  <div class="menuitem">
    <button class="menu-main-item">Another</button>
    <div class="menu-sub-item">
      <button>Sub 3.1</button>
      <button>Sub 3.2</button>
      <button>Sub 3.3</button>
    </div>
  </div>
</div>


Я бы использовал неупорядоченный список (превращая ваш элемент .menu в ul ), чтобы вы могли расположить .menu-sub-item относительно его элемента list.

вам нужно установить position: relative элемента li и white-space: nowrap к кнопкам, чтобы заголовок переполнял их контейнер.

body {
  margin: 0
}

.menu {
  height: 20px;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.menu li { position: relative; }

.menu button { 
  text-align: left;
  white-space: nowrap; }


.menu-main-item:hover+.menu-sub-item {
  display: flex;
  position: absolute;
  top: 20px;
}

.menu-sub-item {
  display: none;
  z-index: 1;
  flex-direction: column;
}

.menu-sub-item:hover {
  display: flex;
  position: absolute;
  top: 20px;
}
<ul class="menu">
  <li>
    <button class="menu-main-item">This is 1</button>
    <div class="menu-sub-item">
      <button>Sub 1.1</button>
      <button>Sub 1.2</button>
      <button>Sub 1.3</button>
    </div>
  </li>
  <li>
    <button class="menu-main-item">Ok 2</button>
    <div class="menu-sub-item">
      <button>Sub 2.1 and some other text</button>
      <button>Sub 2.2</button>
      <button>Sub 2.3</button>
    </div>
  </li>
  <li>
    <button class="menu-main-item">Another 3</button>
    <div class="menu-sub-item">
      <button>Sub 3.1</button>
      <button>Sub 3.2</button>
      <button>Sub 3.3</button>
    </div>
  </li>
</ul>


Есть идеи?

10000