顯示空結果的下拉選單

我只是想制作一個下拉選單，但我的代碼不起作用。請讓我知道錯誤是什么。就像它只在 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>[email protected]</li>
          </ul>
      </li>
  </ul>
</div>

uj5u.com熱心網友回復：

下拉選單是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>[email protected]</li>
          </ul>
      </li>
  </ul>
</div>

uj5u.com熱心網友回復：

做了小改動

.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>[email protected]</li>
      </ul>
    </li>
  </ul>
</div>

uj5u.com熱心網友回復：

您的 css 缺少顯示分配；

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

您還可以在此處找到正確的代碼示例

標籤：html css 下拉式菜单 下拉框

上一篇：使用CSS根本不顯示工具提示圖示

下一篇：為什么CSS不對已安裝的字體設定樣式？