轉換爲下拉菜單

Question

首先道歉，正如我以前見過這個問題，但我仍然不明智，所以不得不自問。 我對html5和css3非常陌生，到目前爲止我已經成功了。

我想轉換的選項之一，在我的導航菜單的下拉菜單中，我一直在使用信息從這裏和其他網站試過很多次，但我仍然有問題。

這裏是我的導航菜單CSS ..

/* Site Nav */ 

    #site-nav 
{ 
    position: absolute; 
    top: 0; 
    right: 50px; 
    font-family: 'Open Sans Condensed', sans-serif; 
    text-align: right; 
} 

    #site-nav ul 
    { 
     list-style: none; 
     overflow: hidden; 
    } 

     #site-nav ul li 
     { 
      display: block; 
      float: left; 
      text-decoration: none; 
      font-size: 1.2em; 
      height: 90px; 
      line-height: 110px; 
      margin: 0 0 0 1.75em; 
     } 

      #site-nav ul li a 
      { 
       color: #000; 
       text-decoration: none; 
       outline: 0; 
      } 

      #site-nav ul li a:hover 
      { 
       color: #fff; 
      } 

     #site-nav ul li.current_page_item 
     { 
      background: url('images/nav-arrow.png') center 77px no-repeat; 
     } 

      #site-nav ul li.current_page_item a 
      { 
       color: #662d91; 
      } 

，這裏是我的菜單中的HTML ...

<ul> 
           <li><a href="index.html">Homepage</a></li> 
           <li><a href="about.html">About Us</a></li> 
           <li><a href="products.html">Products</a></li> 
           <li><a href="bullion.html">Bullion</a></li> 
           <li class="current_page_item"><a href="#.html">Contact Us</a></li> 

          </ul> 

如果這可以用HTML5和CSS3可以做到，那麼這很好，但如果需要的話，我很樂意順着JavaScript路線走下去。

在此先感謝您的幫助，我們將非常感謝。

編輯21/03/2013 ...

我試圖實現給我下面的代碼，這小提琴顯示多遠我有，http://jsfiddle.net/2rgSP/1/ 隨着兩個問題，首先，鏈接被推下網站邊緣，2，下拉菜單落在主包裝後面。 顯然有一些衝突的CSS正在進行，但我是一個完整的初學者，所以我很害怕。 希望有人能看到我出錯的地方。

感謝

李

Answer 1

以下是你可以使用的東西，如果javsscript/jQuery是一個選項：

<ul id="cssdropdown"> 
    <li class="headLink">Home 
     <ul> 
      <li><a href="#">Home1</a></li> 
      <li><a href="#">Home4</a></li> 
      <li><a href="#">Home2</a></li> 
      <li><a href="#">Home3</a></li> 
      <li><a href="#">Home5</a></li> 
     </ul> 
    </li> 
    <li class="headLink">About 
     <ul> 
      <li><a href="#">About1</a></li> 
      <li><a href="#">About2</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">About3</a></li> 
      <li><a href="#">About5</a></li> 
     </ul> 
    </li> 

    <li class="headLink">Contact 
     <ul> 
      <li><a href="#">Contact1</a></li> 
      <li><a href="#">Contact2</a></li> 
      <li><a href="#">Contact3</a></li> 
      <li><a href="#">Contact4</a></li> 
      <li><a href="#">Contact5</a></li> 
     </ul> 
    </li> 
    <li class="headLink">Links 
     <ul> 
      <li><a href="#">Links1</a></li> 
      <li><a href="#">Links2</a></li> 
      <li><a href="#">Links3</a></li> 
      <li><a href="#">Links4</a></li> 
      <li><a href="#">Links5</a></li> 
     </ul> 
    </li> 
</ul> 

CSS

body{ 
    padding:0px; 
    margin:0px; 
} 
ul li{ 
    list-style-type:none; 
} 
#cssdropdown{ 
    padding:0px; 
    margin:0px; 
} 
a{ 
    text-decoration:none; 
    padding:0px; 
    margin:0px;} 
.headLink{ 
    display: inline-block; 
    padding:10px; 
    margin:10px; 
    text-align:right; 
    background-color:#999999; 
    cursor:pointer; 
} 
.headLink ul{ 
    display:none; 
    position: absolute; 
    margin:10px 0 0 -13px; 
    padding:0 10px; 
    text-align:left; 
    background-color:#CCC; 
    cursor:pointer; 
} 

JS：

$(function() { 
    $(".headLink").hover(function() { 
     $('ul',this).slideToggle(); 
    }); 

    }); 

DEMO