Подменю не появляется при наведении мыши

Я новичок в веб-дизайне. Я пытаюсь создать сайт, где в некоторых меню в строке меню есть подменю. Я хочу, чтобы при наведении мыши отображалось подменю, которого не происходит. Это мой код:

@charset "UTF-8";
body {
  margin: 0;
}

. wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  background: #323232;
  text-align: center;
  /* to center the UL in the nav */
}

nav ul {
  display: flex;
  max-width: 1200px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  /* 0 auto allows it to self-center in the nav */
  list-style-type: none;
}

nav li {}

nav a {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  color: white;
  font-size: 15px;
  font-weight: 100;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

.dropdown ul {
  position: absolute;
  top: 43px;
  z-index: 100;
  visibility: hidden;
}

.dropdown ul li a {
  background: none;
  text-align: left;
  display: block;
}

li li {
  width: 100%;
}

.dropdown li:hover>ul {
  display: block;
}
<div class="wrapper">
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li class="dropdown"><a>Drinks</a>
        <ul>
          <li><a href="www.google.com">Pan Shots</a></li>
          <li><a href="www.google.com">Tea</a></li>
        </ul>
      </li>
      <li><a href="">Snacks</a></li>
      <li><a href="Desert.html">Desert</a></li>
      <li><a href="Special.html">Special Diet</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->

При наведении мыши на «Напитки» ничего не появляется. Я хочу, чтобы при перемещении мыши в подменю «Напитки» «Кастрюли» и «Чай» должны были быть видны и должны скрываться, когда мышь не на «Напитки».


html css
person Manish    schedule 27.10.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Ваш пример немного запутан, и в нем много ненужного кода, я представлю вам пример, с которым вы можете работать.

* {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  list-style: none;
}

ul>li {
  flex: 1;
  background: dodgerblue;
  height: 45px;
  text-align: center;
}

ul>li>a {
  text-align: center;
  line-height: 45px;
  text-decoration: none;
  color: #fff;
}

ul>li>ul {
  display: none;
}

ul>li:hover>ul {
  display: block;
}
.dropdown>a:after{
  content:'▿';
  font-weight:bold;
}
<ul>
  <li><a href="home.html">Home</a></li>
  <li class="dropdown"><a href="#">Drinks</a>
    <ul>
      <li><a href="www.google.com">Pan Shots</a></li>
      <li><a href="www.google.com">Tea</a></li>
    </ul>
  </li>
  <li><a href="">Snacks</a></li>
  <li><a href="Desert.html">Desert</a></li>
  <li><a href="contact.html">Contact Us</a></li>
</ul>

person Zohir Salak    schedule 27.10.2018
comment
Спасибо. Я взял этот код, теперь я вижу подменю в разделе «Напитки», однако я все еще не могу щелкнуть подменю «Панорамирование», когда я пытаюсь щелкнуть «Панорамирование», подменю исчезает. Я вижу, что это не происходит здесь, во фрагменте кода, поэтому может быть какая-то проблема с моей страницей. - person Manish; 27.10.2018
comment
Почему бы вам не создать кодовую ручку с этим кодом и не дать мне взглянуть. - person Zohir Salak; 28.10.2018
comment
Когда вы добавляете больше html-элемента, эти li каким-то образом теряют связь с подчиненным ul, поэтому, чтобы заставить его, мы используем position:relative для li и position:absolute для ul Здесь - person Zohir Salak; 28.10.2018

arrow_upward
0
arrow_downward

Вы смешиваете display и visibility. Ваш селектор тоже неправильный.

.dropdown li:hover>ul

Означает, что CSS ищет li дочерний элемент .dropdown для наведения курсора, прежде чем что-то будет сделано с > ul

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

Попробуйте следующее:

@charset "UTF-8";
body {
  margin: 0;
}

. wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  background: #323232;
  text-align: center;
  /* to center the UL in the nav */
}

nav ul {
  display: flex;
  max-width: 1200px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  /* 0 auto allows it to self-center in the nav */
  list-style-type: none;
}

nav li {}

nav a {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  color: white;
  font-size: 15px;
  font-weight: 100;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

.dropdown ul {
  position: absolute;
  top: 43px;
  z-index: 100;
  visibility: hidden;
}

.dropdown ul li a {
  background: none;
  text-align: left;
  display: block;
}

li li {
  width: 100%;
}

.dropdown:hover ul {
  visibility: visible;
}

.dropdown ul a {
  color: black;
}
<div class="wrapper">
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li class="dropdown"><a>Drinks</a>
        <ul>
          <li><a href="www.google.com">Pan Shots</a></li>
          <li><a href="www.google.com">Tea</a></li>
        </ul>
      </li>
      <li><a href="">Snacks</a></li>
      <li><a href="Desert.html">Desert</a></li>
      <li><a href="Special.html">Special Diet</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->

person SuperDJ    schedule 27.10.2018