html - 将手风琴菜单更改为下拉菜单

Question

我有手风琴菜单，但是当滑动它时，它会将其下方的内容向下推，所以我想让它成为下拉菜单，以便它向右滑动。我可以使用另一个，但我喜欢它的风格。有人可以帮我吗，只是第一个li？

看看这里http://jsfiddle.net/RXRBm/1/感谢所有的帮助。

Answer 1

无需将整个内容更改为新的下拉菜单，您可以简单地制作position下拉列表的absolute。我还添加了当原始列表或子菜单不再悬停时子菜单关闭的功能。在这里演示

/* CSS */
li {
    list-style:none;
}
ul {
    padding:0;
    margin:0;
}
#nav {
    float: left;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
}
#nav li {
    position:relative;
}
#nav li a {
    width: 200px;
    text-align:center;
    display: block;
    padding: 10.7px;
    background:#ccc;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #999;
    border-width:0.2px;
    text-decoration: none;
    color: #000;
}
#nav li a:hover, #nav li a.active {
    background: #999;
    color: #fff;
}
#nav li ul {
    display: none;
    position:absolute;
    left:221px;
    z-index:-1;
    top:-1px;
}
#nav li ul li a {
    padding: 10px;
    background:#C01F25;
    opacity:0.95;
    border-bottom: 0.1px solid red;
}

/* Changed jQuery */
$(document).ready(function () {
    $("#nav > li > a").on('mouseenter', function (e) {
            if ($(this).parent().has("ul")) {
                e.preventDefault();
            }
                if (!$(this).hasClass("open")) {
                    // hide any open menus and remove all other classes
                    $("#nav li ul").slideUp(350);
                    $("#nav li a").removeClass("open");

                    // open our new menu and add the open class
                    $(this).next("ul").slideDown(350);
                    $(this).addClass("open");

                } 
    });
    $('#nav').on('mouseleave', function (e) {
        $('.open').removeClass('open').next("ul").slideUp(350)
    });
});

下次您发布问题时，您应该为您的代码提供问题，因为有时 jsFiddles 会被删除或者网站会崩溃