ドロップダウンメニュー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）を設定していないドロップダウンするためにドロップダウンメニューを望む場合：インラインブロックこれは、リスト項目の側を表示します側面による。

また、あなたのドロップダウンボックスのためにあなたが（たい場合）の境界線を述べる必要があります、パディング、マージンなど、あまりにも。

.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のヘルプが必要な場合