下拉菜單w/css

Question

有人可以幫我弄清楚如何在css中設置這個代碼來顯示下拉菜單嗎？這是迄今爲止我所得到的，但我不知道該怎麼做。感謝您的幫助，謝謝。

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="">Programs</a></li> 
      <ul class="drop-down-menu"> 
       <li><a href="">Personal Trainer</a></li> 
       <li><a href="">Group Workout</a></li> 
       <li><a href="">Pricing</a></li> 
      </ul> 
     <li><a href="">About</a></li> 
     <li><a href="">Contact</a></li> 
    </ul> 
</nav> 


nav{ 
    position: fixed; 
    z-index: 6; 
    list-style-type: none; 
    word-spacing: 30px; 
    font-family: 'karla', sans-serif; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    background-color: rgba(0,0,0,0.62); 

nav a{ 
    color: #F4F4F4; 
} 
ul li{ 
    display: inline-block; 
} 
.drop-down-menu{ 
    display: none; 
} 

Answer 1

如果您想在下拉菜單下拉列表中沒有設置非有序列表（UL）下的列表項目（LI）「顯示：inline-block的這將顯示列表項側通過

也爲您的下拉框的一面。你必須註明邊界（如果想），填充，利潤率等了。

.drop-down-menu{ 
    display: none; 
    position: absolute; 
    background-color: #yourcolor; 
    width: 100px; 
    margin-left: (how many pixels between the dropdown and your page 
    ^Best to add this only if position is absolute 
    text-align: center; 
    padding: 10px; 

}

，如果您需要使用您的JavaScript幫助國