Добавление эффекта падения вниз в меню css

Question

* Я измученно искал этот сайт для ответа, прежде чем публиковать вопрос, я попытался несколько решений и ничего не работал с моими точными кодами. Хотя вы можете найти повторяющиеся вопросы на этом сайте. Я не считаю, что это дубликат, если кодирование не является таким же, как и решения. Ничто на этом сайте не работало для моего точного кодирования, поэтому мне нужно было написать мой точный код для справки. *

У меня есть меню, которое выглядит как показано ниже. и опуститься на него. Прямо сейчас вложенная ul просто распространяется по всей странице. он должен отображаться в хорошем раскрывающемся разделе под управлением. Я попытался найти это и просить своих коллег, никто из них не сделал этого раньше. Я создал jsFiddle здесь: http://jsfiddle.net/z3Lpm/

<div id="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Administration</a> 
     <ul> 
      <li><a href="#">Products</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

(не мое полное меню, но вы получите точку.)

, а затем мой CSS:

#menu{ 
    width: 100%; 
    border: 1px solid #000; 
    height: 50px; 
    background-color:#181818; 
    font-family: Helvetica, sans-serif; 
    font-size: 13px; 
} 

#menu ul{ 
    margin-top: 20px; 
} 

#menu ul li{ 
    list-style-type: none; 
    display: inline; 
    margin-left: 50px; 
} 

#menu ul li a:link{ 
    color: #FFF; 
    text-decoration: none; 
    text-transform: uppercase; 
    padding-top: 40px; 
    padding-bottom: 40px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

#menu ul li a:visited{ 
    color: #FFF; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

#menu ul li a:hover{ 
    color: #FFF; 
    background-color: #81B101; 
    -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); 
    -moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); 
    box-shadow:   0px 4px 5px rgba(50, 50, 50, 0.93); 
} 

Answer 1

Здесь я не изменилась цвета или что-то еще, потому что я не знаю, что вы с ними делаете. Дайте мне знать, если это сработает для вас.

http://jsfiddle.net/talymo/LDNpG/

#menu{ 
    background-color:#181818; 
    font-family: Helvetica, sans-serif; 
    font-size: 13px; 
    height:50px; 
} 

    #menu ul{ 
     list-style:none; 
     padding-top:15px; 
    } 

     #menu ul li{ 
      padding:0px 20px; 
      width:auto; 
      float:left; 
      position:relative; 
     } 

     #menu ul li:hover > ul{ 
      display:block;  
     } 

      #menu ul li a{ 
       color: #FFF; 
       text-decoration: none; 
       text-transform: uppercase; 
       padding-top: 40px; 
       padding-bottom: 40px; 
       padding-left: 20px; 
       padding-right: 20px; 
      } 

      #menu ul li a:hover{ 
       color: #FFF; 
       background-color: #81B101; 
       -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); 
       -moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); 
       box-shadow:   0px 4px 5px rgba(50, 50, 50, 0.93); 
      } 

     #menu ul li ul{ 
      overflow:hidden; 
      padding:0; 
      margin:0; 
      display:none; 
      position:absolute; 
      top:20px; 
     }