Erstellen eines Dropdown-Menüs unter der Navigationsleiste

Question

Ich habe eine horizontale Navigationsleiste und möchte ein Dropdown-Menü haben. Ich habe online auf anderen Seiten einschließlich dieses Forums gesucht, aber nichts davon hat für mich funktioniert, soweit es das Styling der Navigationsleiste stattdessen vermasselt hat. Ich hoffe also, eine andere mögliche Lösung zu finden, indem ich hier frage.

So möchte ich die Navigationsleiste aussehen, wenn ich sie über ein Dropdown-Menü über den Bildschirm halte. dropdownlist

Dies sind meine HTML-Codes und CSS-Codes.

HTML Codes:

<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-Codes:

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

Dies ist eine sehr hilfreiche Website, die Sie lehren, wie Dropdown-Menüs zu machen.

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

Ich würde alle ihre Tutorials sehr empfehlen.