Question

我是网页设计的新手。我正在尝试创建一个站点，该站点的菜单栏中某些菜单具有子菜单。我想在鼠标上将其显示未发生的子菜单。这是我的代码：

@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>-->

将鼠标悬停在“饮料”上时，没有任何反应。我想要在“ Drikns”子菜单上移动鼠标时“ Pan Shots”和“ Tea”应该可见，并且当鼠标不在“ Drinks”上时应该隐藏。

Answer 1

您的示例有点混乱，并且有很多不必要的代码，我将为您提供一个示例，供您参考。

* {
  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>

Answer 2

您正在混合display和visibility。您的选择器也是错误的。

.dropdown li:hover>ul

意味着CSS正在寻找li的{{1}}子元素，然后再对.dropdown进行操作

由于继承了CSS属性，因此子元素中的文本仍为白色。因此，您看不到文字。

尝试以下操作：

> ul

@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;
}

子菜单没有出现在鼠标悬停时

2 个答案: