CSS下拉菜單在以下情況下不顯示 <li> -元素懸停。

Question

我有一個帶有4個選項的頂部導航欄，希望在第四個選項懸停時顯示一個下拉菜單。

導航欄是一個無序列表，下拉菜單（應由第四個選項激活）是一個由3個鏈接組成的div。

懸停時應該顯示下拉菜單的列表項：

    <li class="dropdownbutton"><a href="#">Contact</a></li>

借助以下代碼行：

    .dropdownbutton:hover .dropdowncontent {
    display:inline-block;
}

這是下拉內容的CSS：

    .dropdowncontent {
    display:none;
    background-color:#333;
    margin-left:272px;
    width:90px;
    text-align:center;
}

我想念什么？

Answer 1

應該沒關系。

 ul { margin: 0; padding: 0; list-style: none; background-color: #333; } ul li { display: inline-block; position: relative; text-align: left; background-color: #333; } ul li a { display: block; color: #f2f2f2; text-align: center; padding: 16px 15px; text-decoration: none; transition-duration: 0.3s; -webkit-transition-duration: 0.3s; font-size: 17px; font-family: Arial; } ul li a:hover { background-color: #555; } ul li ul.dropdown { min-width: 100%; display: none; position: absolute; z-index: 999; left: 0; width: 90px; } ul li:hover ul.dropdown { display: block; } ul li ul.dropdown li { display: block; } ul li ul.dropdown li a { font-size: 14px; padding: 10px 15px; } 

 <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a> <ul class="dropdown"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> </li> </ul>