Преобразование в выпадающее меню

Question

сначала извинения, поскольку я видел этот вопрос, заданный раньше, но я все еще не мудрее, поэтому мне придется самому спросить об этом. Я очень новичок в html5 и css3, до сих пор мне удалось пройти, до сих пор.

Я хотел бы преобразовать один из вариантов в меню навигации в раскрывающемся меню, я много раз пытался использовать информацию здесь и на других сайтах, но у меня все еще есть проблемы.

Вот мой CSS для меню Nav ..

/* 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, если это необходимо.

Заранее благодарим за любую помощь, мы будем очень благодарны.

EDIT 21/03/2013 ...

Я попытался реализовать код, данное мне ниже, и эта скрипка показывает, как далеко я получил, http://jsfiddle.net/2rgSP/1/ С 2 проблемы, во-первых, ссылки сбрасываются с края веб-сайта, 2, выпадающее меню выходит за основную оболочку. Очевидно, что некоторые конфликтующие css продолжаются, но я начинаю начинаю, поэтому я не знаю, что я боюсь. Надеюсь, кто-то может увидеть, где я ошибаюсь.

Благодаря

Lee

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