Создание выпадающего меню под навигационной панелью

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

я настоятельно рекомендовал бы любого из своих учебников.