样式下拉菜单位于右侧

Question

因此，我正在开发一个在页面右上角有固定位置的jquery菜单。将始终显示"导航"框。当点击时，它会展开显示应用程序、论坛、协会和项目"。当点击子菜单时，它将展开并显示应用程序。

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

我无法使css看起来像这张图片。一些细节是每个"框"中有6倍的填充，下面有3倍的下边距，子菜单将有灰色背景，每个框的宽度取决于其文本的宽度。

以下是实际的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