下拉鍊接不會顯示在懸停上

從HTML/CSS長時間休息後，我最近創建了一個帶有下拉鍊接的菜單，使用了我之前使用過的一種方法，並且很驚訝地發現這些應用程序無法正常工作。下拉鍊接不會顯示在懸停上

我用這個

ul li:hover ul{ display:block;}

徘徊時，「打開」我的菜單，但他們根本不會出現。我曾嘗試在各種代碼塊周圍添加div標籤無濟於事。我錯過了什麼招數？

的jsfiddle這裏：https://jsfiddle.net/qccs4mLL/

來源

2015-09-11 maripeza

你的HTML沒有與你的CSS選擇器保持一致。

ul.menu li:hover > ul { 
    display: block; 
    background: green; 
}

沒有任何ul元素是li元素的直接子。你可以改變你的html，所以ul是li元素的直接子。

body { 
 
    margin: 0px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    width: 8em; 
 
    /*width of each link*/ 
 
} 
 
/*format list*/ 
 

 
ul { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul.menu { 
 
    height: 2.5em; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    background-color: #454545; 
 
} 
 
ul.menu li { 
 
    float: left; 
 
    position: relative; 
 
} 
 
ul.menu li a { 
 
    cursor: pointer; 
 
    display: block; 
 
    color: white; 
 
    line-height: 2.5em; 
 
    padding: 0 10px; 
 
} 
 
ul.menu ul { 
 
    background: #555; 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
} 
 
ul.menu li:hover { 
 
    background: red; 
 
} 
 
ul.menu li:hover > ul { 
 
    display: block; 
 
    background: green; 
 
}

<body> 
 
    <!--Heading--> 
 
    <!--Should change when scrolled down/on mobile--> 
 

 
    <h1 class="heading">Title</h1> 
 

 
    <!--Create Menus--> 
 
    <nav> 
 
    <ul class="menu"> 
 
     <li><a href="index.html">link1</a> 
 
     <ul> 
 
      <li><a href="#">sublink1</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.--> 
 

 
     <li><a href="#">link2</a> 
 
     <ul> 
 
      <li><a href="#">sublink1</a> 
 
      </li> 
 
      <li><a href="#">sublink2</a> 
 
      </li> 
 
      <li><a href="#">sublink3</a> 
 
      </li> 
 
      <li><a href="#">sublink4</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 

 
     <li><a href="#">link3</a> 
 
     </li> 
 
     <li><a href="#">link4</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body>

來源

2015-09-11 15:19:20

下拉鍊接不會顯示在懸停上

回答

相關問題