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

样式下拉菜单位于右侧

2 个答案: