显示空结果的下拉菜单

Question

我只是想制作一个下拉菜单，但我的代码不起作用。请让我知道错误是什么。就像它只在 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>

Answer 1

做了小改动

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

Answer 2

下拉菜单是 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>

Answer 3

您的css缺少显示分配；

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

您还可以在 Here

中找到正确的代码示例

显示空结果的下拉菜单

Dropdown Menu Showing Empty Results

html

css

dropdownbox

drop-down-menu