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

Question

我有手风琴菜单，但是当它滑动时会将其下面的内容向下推，因此我想使其下拉菜单以使其向右滑动。我可以使用另一个，但我喜欢它的风格。有人能帮助我，只是第一个li？

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

Answer 1

与其将整个事物更改为新的下拉菜单，您只需简单地将下拉列表absolute的position。我还添加了当原始列表或子菜单不再徘徊时子菜单关闭的功能。 Demo Here

/* 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被删除或网站干脆崩溃