如何正確顯示下拉菜單

Question

我想在懸停但不工作時播放菜單。

HTML代碼倒afficher：

<nav> 
    <ul class="menu"> 
     <li><a href="index.html">home</a></li> 
     <li class="current">other</a></li> 
     <li> 
      <a href="index-2.html">services</a> 
      <ul class="drop"> 
       <li><a href="index-2.html">s1</a></li> 
       <li><a href="index-4.html">s2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

CSS代碼來顯示菜單和下拉：

nav .menu li:hover > a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li :hover > .drop{ 
    display:black; 
} 

Answer 1

nav .menu li:hover > a { 
 
    background: #e2782e; 
 
    transition: all 0.5s; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
} 
 

 
.drop{ 
 
    display: none; 
 
} 
 

 
li:hover > .drop{ 
 
    display: block; 
 
}

<nav> 
 
    <ul class="menu"> 
 
    <li><a href="index.html">home</a></li> 
 
    <li class="current"><a href="#">other</a></li> 
 
    <li><a href="index-2.html">services</a> 
 
     <ul class="drop"> 
 
     <li><a href="index-2.html">s1</a></li> 
 
     <li><a href="index-4.html">s2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

<nav> 


    <ul class="menu"> 


            <li><a href="index.html">home</a></li> 
            <li class="current">other</a></li> 


            <li> 
             <a href="index-2.html">services</a> 
             <ul class="drop"> 

            <li><a href="index-2.html">s1</a></li> 
            <li><a href="index-4.html">s2</a></li> 

             </ul> 
            </li> 

           </ul> 

    </ul> 

</nav> 


nav .menu li:hover .drop li a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li :hover > .drop{ 
    display:block; 
} 

Please try this code. 

Answer 3

幾個問題：

• unnested </a>「其他」菜單項的標籤。
• 末
• black外來</ul>標籤是不是爲display屬性的有效值，使用list-item來代替。

編輯：請參閱Nick De Jaeger對上述修正代碼的回答。使用display: block也可以，但在這種情況下list-item更合適（<li>）。

Answer 4

巴特看這裏，這是所有的CSS，當我將鼠標懸停在下拉所有auther菜單項牆根

nav .menu { 
     height: 60px; 
     background: #8d8989; 
     border-radius: 5px; 
     padding: 0; 
     margin: 0; 
     text-align: center; /* center the li */ 

    } 

    nav .menu li { 
     display: inline-block; 
    } 

    nav .menu li a{ 
     font-family: arial, sans-serif; 
     color: #fff; 
     text-decoration: none; 
     text-transform: uppercase; 
     line-height: 60px; 
     font-weight:bold; 
     vertical-align: middle; 
     padding: 20px; 
     transition: all 0.5s; 
    } 
    nav .menu li:hover > a { 
     background: #e2782e; 
     transition: all 0.5s; 
     color: #FFF; 
     font-weight: bold; 
    } 

    .drop{ 
     display: none; 
    } 

    li:hover > .drop{ 
    display: list-item; 
     background-color:red; 
    } 

HTML

<nav> 


    <ul class="menu"> 


            <li><a href="index.html">home</a></li> 
            <li><a href="index.html">contact</a></li> 
            <li> 
             <a href="index-2.html"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a> 
             <ul class="drop"> 

            <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li> 
            <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li> 
            <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li> 
            <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li> 
             </ul> 
            </li> 

           </ul> 

    </ul> 

</nav> 

Answer 5

看到這裏jsfiddle

你有一些問題您的代碼

首先在您的HTML中li.current上有一個結束標記</a>，但您沒有任何<a>那裏。使結束標記不需要

也必須和額外的結束標記</ul>，你只有2 ul關閉，ul.menu和ul.drop所以你只需要2 </ul>不3.

第二次在你的CSS ，你有一個li和:hover之間的空間，你需要把它們寫在一起，如li:hover。

也display:black不存在，我猜你想寫display:block

更新代碼的HTML：

<ul class="menu"> 


           <li><a href="index.html">home</a></li> 
           <li class="current">other</li> 


           <li> 
            <a href="index-2.html">services</a> 
            <ul class="drop"> 

           <li><a href="index-2.html">s1</a></li> 
           <li><a href="index-4.html">s2</a></li> 

            </ul> 
           </li> 



    </ul> 

CSS：

nav .menu li:hover > a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li:hover > .drop{ 
    display:block; 
} 

讓我知道，如果它幫助。

注：有關於這個的計算器這麼多問題，你應該能夠很快找到答案，你也可能要檢查這個CSS Dropdowns

Answer 6

請檢查下面的代碼，供您參考。

ul.drop{display:none;} 
 
nav ul li a:hover{background:#ccc;} 
 
nav ul li:hover ul.drop{display:block;}

<nav> 
 
    <ul class="menu"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">other</a></li> 
 
    <li><a href="#">services</a> 
 
     <ul class="drop"> 
 
     <li><a href="#">s1</a></li> 
 
     <li><a href="#">s2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>