CSS Меню не раскрывается при наведении курсора - PullRequest
Новая
       25

CSS Меню не раскрывается при наведении курсора

0 голосов
/ 17 июня 2020

У меня проблемы с раскрывающимся меню моего блога. Когда я нахожу курсор на «Plamo Reviews», подменю не выпадают. Я прочитал несколько статей по этому поводу, но до сих пор не могу найти решения. Я думаю, что что-то не так с CSS.

Кто-нибудь может мне помочь? Буду признателен за любую помощь. Заранее спасибо! 

nav.fixnavbar {
  position: relative;
  display: block;
  width: 100%;
  background: #778595;
  z-index: 99;
  padding: 0;
  margin-bottom: 0;
  font-size: 0;
  opacity: 1;
}

.fixednav {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1010px;
}

.fixednav li {
  display: inline-block;
  position: relative;
}

.fixednav li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.fixednav li a:hover {
  background: #6c7a89;
  color: #fff;
}

.nav-icon {
  display: none;
}

nav.fixnavbar.main-nav-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.97;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sub-menu li {
  display: none;
}

.fixednav li {
  position: relative;
}

.sub-menu {
  display: none;
  position: absolute;
}

.fixednav li:hover .sub-menu {
  display: block;
}
<nav class='fixnavbar'>
  <ul class='fixednav' id='togglemenu'>
    <li><a href='/'>Home</a></li>
    <li><a href='/search/label/list'>List bài viết</a></li>
    <li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
    <li><a href='/search/label/review'>Plamo Reviews</a>
      <ul class="sub-menu">
        <li><a href="#">No1</a></li>
        <li><a href="#">No2</a></li>
      </ul>
    </li>
    <li class='indzign-box' onclick='document.getElementById(&apos;indzignbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars' /></li>
  </ul>
</nav>

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Я не думаю, что Stackoverflow - это место, где можно выполнить домашнее задание. Тем не менее, вот рабочий образец с минимальными исправлениями, чтобы заставить его работать.

  1. Вам не хватало позиции (top) для sub-menu, и она находилась прямо под fixed-nav.
  2. Для пунктов подменю не было background-color, поэтому белый текст не был виден. 

nav.fixnavbar {
  position: relative;
  display: block;
  width: 100%;
  background: #778595;
  z-index: 99;
  padding: 0;
  margin-bottom: 0;
  font-size: 0;
  opacity: 1;
}

.fixednav {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1010px;
}

.fixednav li {
  display: inline-block;
  position: relative;
  background-color: #6b7684;
}

.fixednav li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.fixednav li a:hover {
  background: #6c7a89;
  color: #fff;
}

.nav-icon {
  display: none;
}

nav.fixnavbar.main-nav-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.97;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.fixednav li {
  position: relative;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 54px;
  left: 0;
}

.fixednav li:hover .sub-menu {
  display: block;
}
<nav class='fixnavbar'>
  <ul class='fixednav' id='togglemenu'>
    <li><a href='/'>Home</a></li>
    <li><a href='/search/label/list'>List bài viết</a></li>
    <li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
    <li><a href='/search/label/review'>Plamo Reviews</a>
      <ul class="sub-menu">
        <li><a href="#">No1</a></li>
        <li><a href="#">No2</a></li>
      </ul>
    </li>
    <li class='indzign-box' onclick='document.getElementById(&apos;indzignbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars' /></li>
  </ul>
</nav>
0 голосов
/ 17 июня 2020

Чтобы добиться желаемого поведения, вам, вероятно, следует изменить две вещи:

  1. Вы можете избавиться от правила CSS, которое дает вашим подменю li элементы значение display: none, поскольку это не нужно. Если для родительского элемента .sub-menu задано значение display: none, то потомки наследуют его автоматически.

  2. Вы установили .sub-menu на position: absolute, но у вас его нет. t определил любые дополнительные CSS правила для указания , где он должен go относительно своего родителя. Так, например, вы можете попробовать сделать так, чтобы ваши .sub-menu правила выглядели следующим образом: 

.sub-menu {
  display: none;
  position: absolute;
  top: 75px;
  background: #ccc;
}

Таким образом, вы говорите, что ваше меню должно быть расположено на 75 пикселей ниже его родитель. background предназначен для того, чтобы ваше подменю было видно на фоне остальной части вашего приложения (вы, конечно, можете изменить это как угодно).

...