樣式下拉菜單位於右邊

Question

因此，我正在研究一個jquery菜單，它的右上角有一個固定的位置。 「導航」框將始終顯示。點擊後，系統便會顯示應用，論壇，公會和項目」。並在單擊子菜單時，它會擴大，以及與應用所示。

http://i46.tinypic.com/xp6gox.png

我不能得到的CSS看起來像這個圖像一些細節是每個「盒子」6px填充，其下的3px底部邊距，子菜單將有灰色背景，每個盒子的寬度取決於它的文本的寬度。這裏是實際的HTML/CSS www.jsfiddle.net/3HAKX/

任何幫助將不勝感激。

Answer 1

的CSS看起來像：

www.jsfiddle.net/3HAKX/1/

你想爲一個下拉菜單太JS腳本？

Answer 2

我不知道我是否理解你的問題。但是，這是我如何實現這一目標的代碼。

<ul id="accordion"> 
      <li> 
       <a href="#recent" class="heading">Application</a> 
           <ul> 
        <li><a href="#">January 2009</a></li> 
        <li><a href="#">December 2008</a></li> 
        <li><a href="#">November 2008</a></li> 
        <li><a href="#">October 2008</a></li> 
        <li><a href="#">September 2008</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#archive" class="heading">Forum</a> 
       <ul> 
        <li><a href="#">January 2009</a></li> 
        <li><a href="#">December 2008</a></li> 
        <li><a href="#">November 2008</a></li> 
        <li><a href="#">October 2008</a></li> 
        <li><a href="#">September 2008</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#archive" class="heading">Guilds</a> 
       <ul> 
        <li><a href="#">January 2009</a></li> 
        <li><a href="#">December 2008</a></li> 
        <li><a href="#">November 2008</a></li> 
        <li><a href="#">October 2008</a></li> 
        <li><a href="#">September 2008</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#archive" class="heading">Projects</a> 
       <ul> 
        <li><a href="#">January 2009</a></li> 
        <li><a href="#">December 2008</a></li> 
        <li><a href="#">November 2008</a></li> 
        <li><a href="#">October 2008</a></li> 
        <li><a href="#">September 2008</a></li> 
       </ul> 
      </li> 

CSS

ul#accordion{ 
float:right; 
} 
ul#accordion, ul#accordion ul { list-style: none; margin: 0; } 
ul#accordion a.heading { 
    color: black; 
    display: block; 
    font-size:16px; 
    font-weight:bold; 
    text-decoration: none; 
    margin-right:30px; 
} 
ul#accordion li ul a { font-size:14px;color: black; text-decoration: none;} 
ul#accordion li ul a:hover { text-decoration: underline; } 

#accordion li ul { display: none; } 
#accordion li.current ul { display: block; } 

JS

$(document).ready(function() { 
    $('ul#accordion a.heading').click(function() { 
     $(this).css('outline','none'); 
     if($(this).parent().hasClass('current')) { 
      $(this).siblings('ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
      }); 
     } else { 
      $('ul#accordion li.current ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
      }); 
      $(this).siblings('ul').slideToggle('slow',function() { 
       $(this).parent().toggleClass('current'); 
      }); 
     } 
     return false; 
    }); 
}); 

這裏是一個jsFiddle