ナビゲーションバーのドロップダウンメニューの作成

Question

私は水平ナビゲーションバーを持っており、ドロップダウンメニューを持っています。私はこのフォーラムを含む他のサイトでオンラインで検索しましたが、代わりにナビゲーションバーのスタイリングを台無しにした限り、私のために働いたことはありません。だから私はここで尋ねることで別の可能な解決策を見つけることを望む。

これは、ナビゲーションバーをドロップダウンメニューでホバーするときのようにしたいのです。 dropdownlist

これは私のHTMLコードとCSSコードです。

HTMLコード：

<ul class="main"> 
    <li class="main"><a href="cart.php" target="_blank"><img style ="margin-top:-5px;" src="http://i63.tinypic.com/2u43au0.png" border="0" width="25" height="25"/></a></li> 
    <li class="main"><a href="#about">About</a></li> 
    <li class="main"><a href="login.php">Login/Register</a></li> 
</ul> 

CSSコード：

ul.main { 
    list-style-type: none; 
    margin: -10px -30px; 
    width: 1268px; 
    height: 50px; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    margin-top:10px; 
    margin-top: 10px; 

} 

li.main { 
    float: right; 
} 

li.main a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 17px 16px; 
    text-decoration: none; 
    font-family:Helvetica; 
    font-size:13px; 
    height: 50px; 
} 

li.main a:hover { 
    background-color: #111; 
} 

JSFiddle：https://jsfiddle.net/vds0LLg9/

Answer 1

これはどのようにドロップダウンメニューを作る方法をお教えします非常に役立つサイトです。

http://www.w3schools.com/css/css_dropdowns.asp

私は非常に彼らのチュートリアルのいずれかをお勧めします。