超級子選單不像應該的那樣出現-有解無憂

所以我試圖制作一個超級子選單，出于某種原因，當我將滑鼠懸停在主選單而不是子選單上方時，會出現超級子選單。我認為顯示有問題：無；但我不知道如何修復它。我已經試著把它放在課堂上，但它仍然沒有用，我已經仔細檢查了 HTML 以確保沒有錯別字，沒有錯，所以我現在很困惑和卡住，請幫助。

代碼：

* {
    margin: 0;
    padding: 0;
  }
  
body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}
  
nav {
  /* this is a tag */
  height: 60px;
  background-color: white;
  display:flex;
}
  
nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  padding: 2.3px 14px;
  text-decoration: none;
  text-align: center;
  display: block;  
}

nav form {
  max-width: 100%;
  height: 60px;
}
  
nav ul {
  display:flex;
  list-style: none;
    
}
  
nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}
  
nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}
  
nav ul li:hover ul {
  display: block;
}
  
nav ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: translate(100%,0);
  -webkit-transform: translate(100%,0);
  transform:translate(100%,0);
  list-style: none;
}



.subMenu li:hover>.SuperSubMenu{
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <title>Wall of nothing</title>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <nav id="navbar">
    <form name="" method="" action="BUTTON TEST.html">
      <input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
    </form>
    <ul>
      <li>
        <a href="about.php">About</a>
        <ul>
          <li>
            <a href="about.php#expectations">Expectations</a>
          </li>
          <li>
            <a href="about.php#faq">FAQ</a>
          </li>
          <li>
            <a href="laptopprogram.php">Laptop Program</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="why.php">Why?</a>
        <ul>
          <li>
            <a href="#">What?</a>
          </li>
          <li>
            <a href="#">Events & Activities</a>
          </li>
          <li>
            <a href="#">Meet The Grads</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Events</a>
        <ul>
          <li>
            <a href="#">Opportunities</a>
          </li>
          <li>
            <a href="#">asd</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="" target="_blank">assd</a>
      </li>
      <li>
        <a href="contact.php">Contact</a>
        <ul class="subMenu">
          <li>
            <a href="#">Numbers</a>
            <ul class="SuperSubMenu">
              <li>
                <a href="#">Person1</a>
              </li>
              <li>
                <a href="#">Person2</a>
              </li>
            </ul>
          </li>
          
          <li>
            <a href="#">Fax</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

uj5u.com熱心網友回復：

它不起作用，因為

nav ul li:hover ul {
  display: block;
}

正在覆寫

.SuperSubMenu {
 display: none; 
}

財產。要修復它，您可以將 !important 添加到 SuperSubMenu 的兩個 css 中。這可能不是最好的方法，但它有效。

* {
    margin: 0;
    padding: 0;
  }
  
body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}
  
nav {
  /* this is a tag */
  height: 60px;
  background-color: white;
  display:flex;
}
  
nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  padding: 2.3px 14px;
  text-decoration: none;
  text-align: center;
  display: block;  
}

nav form {
  max-width: 100%;
  height: 60px;
}
  
nav ul {
  display:flex;
  list-style: none;
    
}
  
nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}
  
nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}

.SuperSubMenu {
  display: none !important;
}
  
nav ul li:hover ul {
  display: block;
}
  
nav ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: translate(100%,0);
  -webkit-transform: translate(100%,0);
  transform:translate(100%,0);
  list-style: none;
}

.subMenu li:hover>.SuperSubMenu{
  display: block !important;
}

<!DOCTYPE html>
<html>
<head>
  <title>Wall of nothing</title>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <nav id="navbar">
    <form name="" method="" action="BUTTON TEST.html">
      <input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
    </form>
    <ul>
      <li>
        <a href="about.php">About</a>
        <ul>
          <li>
            <a href="about.php#expectations">Expectations</a>
          </li>
          <li>
            <a href="about.php#faq">FAQ</a>
          </li>
          <li>
            <a href="laptopprogram.php">Laptop Program</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="why.php">Why?</a>
        <ul>
          <li>
            <a href="#">What?</a>
          </li>
          <li>
            <a href="#">Events & Activities</a>
          </li>
          <li>
            <a href="#">Meet The Grads</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Events</a>
        <ul>
          <li>
            <a href="#">Opportunities</a>
          </li>
          <li>
            <a href="#">asd</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="" target="_blank">assd</a>
      </li>
      <li>
        <a href="contact.php">Contact</a>
        <ul class="subMenu">
          <li>
            <a href="#">Numbers</a>
            <ul class="SuperSubMenu">
              <li>
                <a href="#">Person1</a>
              </li>
              <li>
                <a href="#">Person2</a>
              </li>
            </ul>
          </li>
          
          <li>
            <a href="#">Fax</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

uj5u.com熱心網友回復：

您需要在倒數第三個 CSS 規則中使用直接后代運算子 - 當懸停主選單項時，該規則使常規子選單出現。否則，此規則也會影響（即，使ul主選單項懸停時的 SuperSubMenu可見）。所以改變這個選擇器：

nav ul li:hover ul {
  display: block;
}

...到以下內容：

nav > ul > li:hover > ul {
  display: block;
}

* {
    margin: 0;
    padding: 0;
  }
  
body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}
  
nav {
  /* this is a tag */
  height: 60px;
  background-color: white;
  display:flex;
}
  
nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  padding: 2.3px 14px;
  text-decoration: none;
  text-align: center;
  display: block;  
}

nav form {
  max-width: 100%;
  height: 60px;
}
  
nav ul {
  display:flex;
  list-style: none;
    
}
  
nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}
  
nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}
  
nav > ul > li:hover > ul {
  display: block;
}
  
nav ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: translate(100%,0);
  -webkit-transform: translate(100%,0);
  transform:translate(100%,0);
  list-style: none;
}


.subMenu li:hover>.SuperSubMenu{
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <title>Wall of nothing</title>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <nav id="navbar">
    <form name="" method="" action="BUTTON TEST.html">
      <input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
    </form>
    <ul>
      <li>
        <a href="about.php">About</a>
        <ul>
          <li>
            <a href="about.php#expectations">Expectations</a>
          </li>
          <li>
            <a href="about.php#faq">FAQ</a>
          </li>
          <li>
            <a href="laptopprogram.php">Laptop Program</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="why.php">Why?</a>
        <ul>
          <li>
            <a href="#">What?</a>
          </li>
          <li>
            <a href="#">Events & Activities</a>
          </li>
          <li>
            <a href="#">Meet The Grads</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Events</a>
        <ul>
          <li>
            <a href="#">Opportunities</a>
          </li>
          <li>
            <a href="#">asd</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="" target="_blank">assd</a>
      </li>
      <li>
        <a href="contact.php">Contact</a>
        <ul class="subMenu">
          <li>
            <a href="#">Numbers</a>
            <ul class="SuperSubMenu">
              <li>
                <a href="#">Person1</a>
              </li>
              <li>
                <a href="#">Person2</a>
              </li>
            </ul>
          </li>
          
          <li>
            <a href="#">Fax</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

uj5u.com熱心網友回復：

你可以用簡單的 CSS

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

<div class="dropdown">
  <button class="dropbtn">Dropdown Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380006.html

標籤：html css css-选择器

上一篇：如何使用Mockito模擬密碼編碼器

下一篇：相對于視口定位嵌套的div