Question

我有一个问题，一整天都在把香蕉推给我......

我所拥有的是一堆<li>个菜单项，其中一个菜单项会打开<ul>子菜单。问题是，我无法让周围的<li>表现出来并在重新定位时考虑子菜单。

它应该如何表现（我只能在下拉菜单项位于第三列时才能正常工作）：http://jsfiddle.net/6a3eZ/3/

这是我的CSS：

#menu {
    position:fixed;
    width:303px;
    margin: 62px 10px 0 0;
    padding:0;
    z-index:9999;
    right:0;
    background:#EFEFEF;
    display:visible;

    -moz-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.55);
    box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.55);
}
.menu-active {
    display:block !important;
}

.menu {
    text-align:center;
    padding:0;
    margin:0;
}
.menu a {
    height:100px;
    color:#999;
    padding: 0;
    margin: 0 1px 1px 0;
    display:block;
    font-family:'Montserrat',arial,tahoma,verdana;
    font-weight: 700;
    cursor:pointer;
    background:#fff;
}
.menu a:hover, .menu a:active {
    color:#fff;
    background:#999;
    text-decoration:none;
}
.menu ul {

}
.menu li {
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    z-index:-1;
    width:100px;
}
.menu li:first-child {
    border-top:none !important;
}
.menu li a {
    font-size:10px;
}
ul.sub-menu {
    list-style: none;
    margin:0 0 0 0;
    padding:0;
    width:300px;
}
.second ul.sub-menu {
    margin:0 0 0 -100px;
}
.sub-menu li {
    heigh:100px;
    float:left;
    list-style: none;
    margin:0;
    padding:0;
    background:red;
    width:100px;
}
.sub-menu a {
    display:block;
    color:#888;
    margin:0;
    padding:0;
    height:100px;
}
.menu li.sub a {
    background: url(images/menu-expandable.png);
    background-position: right center;
    background-repeat: no-repeat;
}
/* Retina display .menu li.sub a */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi)
{
.menu li.sub a { 
    background: url(images/menu-expandable@2x.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 18px 7px;
}
}
.menu li.sub a:hover {
}
.menu li.sub > ul a {
    background-image: none;
    font-size:10px;
}

Answer 1

我会这样做：

HTML：

<style>
*{margin:0; padding:0;}
ul{list-style:none; width: 408px;}
li{float:left; width:100px; height: 100px; font-family:tahoma; text-align:center; line-height:100px; border:1px solid #ccc; margin:1px;}   
ul ul{display:none;}
#item3{background: #eee;}
.sub{background: #cee;}
</style>

<ul id="nav">
    <li id="1">One <ul><li>sub a</li><li>sub b</li><li>sub c</li></ul></li>
    <li id="2">Two <ul><li>sub d</li><li>sub e</li><li>sub f</li></ul></li>
    <li id="3">Three <ul><li>sub e</li><li>sub f</li><li>sub g</li></ul></li>
    <li id="4">Four <ul><li>sub h</li><li>sub i</li><li>sub j</li></ul></li>
    <li id="5">Five <ul><li>sub k</li><li>sub k</li><li>sub l</li></ul></li>
    <li id="6">Six <ul><li>sub m</li><li>sub n</li><li>sub o</li></ul></li>
</ul>

JS：

$(function(){

    $('#nav > li').on('click', function(){   
       // console.log('click');
        var id = $(this).attr('id');
        is_new = true;

        if($('.sub').length){ 
            is_new = ($('.sub').first().attr('data-parent') !== id);            
            $('.sub').remove();
        }

        if(is_new){
            var $sub = $(this).children('ul').clone();
            var index = Math.floor($(this).index() / 3) * 3;
            var after = $('#nav > li').eq(index+2);
            $sub.children('li').addClass('sub').attr('data-parent', id).insertAfter(after); 
        }
    });
});

示例：http://jsfiddle.net/justincook/6a3eZ/7/

Answer 2

http://jsfiddle.net/cornelas/6a3eZ/8/

动画仍然是一个问题，但我确定你可以在你编写它之后纠正它，但这会解决你的css问题。

#menu {
    background: none repeat scroll 0 0 #EFEFEF;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.55);
    display: block;
    margin: 62px 10px 0 0;
    padding: 0;
    right: 0;
    width: 303px;
    z-index: 9999;
}
.menu01 {
    width: 310px;
}

.menu {
    margin: 0;
    padding: 0;
    text-align: center;
}

.menu li {
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100px;
    z-index: -1;
}

Answer 3

添加到您的.sub菜单类中。

element.style {
   display: block;
   position: absolute;
   visibility: visible;
}

这将为您提供所需的结果。

菜单<li>分为打开子菜单<ul>时不显示的列和行</ul> </li>

3 个答案: