显示空结果的下拉菜单答案

【问题标题】：Dropdown Menu Showing Empty Results显示空结果的下拉菜单
【发布时间】：2021-12-17 13:55:56
【问题描述】：

我只是想制作一个下拉菜单，但我的代码不起作用。请让我知道错误是什么。就像它只在 Hover 上显示空的下拉菜单，只是增加它的宽度而不显示任何链接。请帮助我找到我被困在这个问题上的解决方案。从一整月开始。这是代码...

.contain ul{
  list-style: none;
  margin-top: 40px;
  position:relative;
  bottom: 15px;
  z-index: 99999999999999999;
  overflow-y: hidden;
  position: absolute;
  top: 150px;
}

.contain ul li {
  background: cadetblue;
  width: 170px;
  border: 1px solid #fff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  color: #fff;
  font-size: 16px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 99999999999999999;
}

.contain ul li:hover{
  background-color:green; 
  height: 250px;
  width: 250px;
  z-index: 99999999999999999;
}

.contain ul ul{
  display: none;
  z-index: 99999999999999999;
  height: 40
}

::-webkit-scrollbar {
  width: 7px;
  background-color: orange;
  height: 20px;
}

<div class="contain">
    <ul>
      <li>HOME
          <ul>
              <li>Welcome Page</li>
              <li>Main Page</li>
          </ul>
      </li>
      <li>ABOUT US
          <ul>
              <li>Our Motto</li>
              <li>Principal's Messgae</li>
              <li>Organization</li>
          </ul>
      </li>
      <li>ADMISSIONS
        <ul>
          <li>Registration</li>
          <li>Subjects</li>
          <li>Fee Structure</li>
        </ul>
      </li>
      <li>Academics
          <ul>
              <li>School Timings</li>
              <li>Faculty</li>
              <li>CBSE</li>
          </ul>
      </li>
      <li>CONTACT US
          <ul>
              <li>+91-995 828 4006</li>
              <li>jpsnoida@jaypeeschools.edu.in</li>
          </ul>
      </li>
  </ul>
</div>

【问题讨论】：

标签： html css drop-down-menu dropdownbox

【解决方案1】：

您的 css 缺少显示分配；

.contain ul li:hover ul {display: block;}

你也可以在Here找到正确的代码示例

【讨论】：

它不起作用

【解决方案2】：

做了些小改动

.contain ul li:hover ul {
    display: block;
}

.contain ul {
  list-style: none;
  margin-top: 40px;
  position: relative;
  bottom: 15px;
  z-index: 99999999999999999;
  overflow-y: hidden;
  position: absolute;
  top: 150px;
}

.contain ul li {
  background: cadetblue;
  width: 170px;
  border: 1px solid #fff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  color: #fff;
  font-size: 16px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 99999999999999999;
}

.contain ul li:hover {
  background-color: green;
  height: 250px;
  width: 250px;
  z-index: 99999999999999999;
}

.contain ul ul {
  display: none;
  z-index: 99999999999999999;
  height: 40
}

::-webkit-scrollbar {
  width: 7px;
  background-color: orange;
  height: 20px;
}

.contain ul li:hover ul {
  display: block;
}

<div class="contain">
  <ul>
    <li>HOME
      <ul>
        <li>Welcome Page</li>
        <li>Main Page</li>
      </ul>
    </li>
    <li>ABOUT US
      <ul>
        <li>Our Motto</li>
        <li>Principal's Messgae</li>
        <li>Organization</li>
      </ul>
    </li>
    <li>ADMISSIONS
      <ul>
        <li>Registration</li>
        <li>Subjects</li>
        <li>Fee Structure</li>
      </ul>
    </li>
    <li>Academics
      <ul>
        <li>School Timings</li>
        <li>Faculty</li>
        <li>CBSE</li>
      </ul>
    </li>
    <li>CONTACT US
      <ul>
        <li>+91-995 828 4006</li>
        <li>jpsnoida@jaypeeschools.edu.in</li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

下拉菜单是display: none，因此您需要为此设置CSS

.contain ul li:hover ul {
    display: block;
}

另外，我添加了一些 CSS 以在悬停时显示正确的下拉菜单。

.contain ul{
  list-style: none;
  margin-top: 40px;
  position:relative;
}

.contain ul li {
  background: cadetblue;
  width: 170px;
  border: 1px solid #fff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  color: #fff;
  font-size: 16px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
}

.contain ul li:hover{
  background-color:green;
}

.contain ul li:hover ul {
  display:block;
  z-index: 10;
}

.contain ul ul{
  display: none;
  position: absolute;
  background: cadetblue;
  top: 51px;
  left: 0;
  padding: 0;
  margin: 0;
  min-width: 250px;
}

.contain ul ul li {
  width: 100%;
  display: block;
}

::-webkit-scrollbar {
  width: 7px;
  background-color: orange;
  height: 20px;
}

<div class="contain">
    <ul>
      <li>HOME
          <ul>
              <li>Welcome Page</li>
              <li>Main Page</li>
          </ul>
      </li>
      <li>ABOUT US
          <ul>
              <li>Our Motto</li>
              <li>Principal's Messgae</li>
              <li>Organization</li>
          </ul>
      </li>
      <li>ADMISSIONS
        <ul>
          <li>Registration</li>
          <li>Subjects</li>
          <li>Fee Structure</li>
        </ul>
      </li>
      <li>Academics
          <ul>
              <li>School Timings</li>
              <li>Faculty</li>
              <li>CBSE</li>
          </ul>
      </li>
      <li>CONTACT US
          <ul>
              <li>+91-995 828 4006</li>
              <li>jpsnoida@jaypeeschools.edu.in</li>
          </ul>
      </li>
  </ul>
</div>

【讨论】：