转换为下拉菜单

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