Question

我正在寻找一个菜单上的错误问题。我也用jQuery标记了这个 - 我认为它可以更快地解决问题。

我有一个用CSS制作的下拉菜单，内有子项。不幸的是，我不知道每个父母可能有多少个孩子的链接，每个孩子都会浮动和阻止。每次添加新链接以添加margin-left时，我都无法编辑CSS。

js使用菜单：http://jsfiddle.net/guBwZ/1/

我正在追求的目标：我正在尝试在链接＃2的正下方显示链接＃2（也是链接＃3）的内部链接，以某种方式居中（参见下面的jsFiddle）。

使用我所追求的内容：http://jsfiddle.net/6meU8/（将鼠标悬停在Link＃2和Link＃3上）。

非常感谢任何帮助。谢谢。

UPATE：

基于@craniumonempty示例，我已经用我正在寻找的内容更新了下面的jsFiddle：http://jsfiddle.net/guBwZ/32/

基本上，我已从display：none移动到visibility：hidden来测量内部UL的宽度，然后将其移到div.center中。

谢谢！

Answer 1

首先删除中心的div。我不确定它是否应该在任何一个地方。

下一步：把“位置：相对;”对于“＃menu ul li”，它们会排成一行。

然后：删除“#menu ul li.sub-menu ul”的高度和宽度

http://jsfiddle.net/guBwZ/12/

这是你要找的那种吗？

另外，如果您想要多级工作css菜单的示例：

http://ago.tanfa.co.uk/css/examples/menu/hs7.html

编辑：好的，不得不离开一点。不知道你现在在哪里，但这就是我所拥有的：

http://jsfiddle.net/guBwZ/14/

不是世界上最好的代码，但有效。这是jquery：

$(document).ready(function(){
    $("#menu").children("ul").children("li").hover(function(){
        var pos = $(this).position();
        var width = $(this).width();
        $(this).children("div.center").each(function(index){
            $(this).css("display","inline");
            var count = $(this).children("ul").children("li").length;
            var left = (pos.left+width/2)-((width*count)/2);
            if ( left < 0 ) { left = 0; }
            $(this).children("ul").each(function(index2){
                $(this).css("left",left);
                left += $(this).width();
            });
        });
    },
    function(){
        $(this).children("div.center").each(function(index){
            $(this).css("display","none");
        });
    });
});

HTML：

<div id="menu">
    <ul>
        <li class="active"><a href="#" title="#">Link #1</a></li>
        <li class="sub-menu">
            <a href="#" title="#">Link #2</a>
            <div class="center">
                <ul>
                    <li><a href="#" title="#">Link #2-1</a></li>
                    <li><a href="#" title="#">Link #2-2</a></li>
                </ul>
            </div>
        </li>
        <li class="sub-menu">
            <a href="#" title="#">Link #3</a>
            <div class="center">
                <ul>
                    <li><a href="#" title="#">Link #3-1</a></li>
                    <li><a href="#" title="#">Link #3-2</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#" title="#">Link #4</a></li>
        <li><a href="#" title="#">Link #5</a></li>
        <li>
            <a href="#" title="#">Link #6</a>
            <div class="center">
                <ul>
                    <li><a href="#" title="#">Link #6-1</a></li>
                    <li><a href="#" title="#">Link #6-2</a></li>
                </ul>
            </div>
        </li>
        <li class="nomarginright"><a href="#" title="#">Link #7</a></li>
    </ul>
</div>

和css：

#menu ul {
    list-style-type: none;
    overflow: auto;
    padding: 0;
    margin: 0;
}
#menu ul li {
    float: left;
    width: 111px;
}
#menu ul li a {
    font:normal 15px/19px Arial, sans-serif;
    color:#9a9b9d;
    display: block;
    padding: 11px 35px 10px 12px;
    text-decoration: none;
    text-transform:uppercase;
}

#menu ul li.active a {
    background:#FFF;
    color:#000;
}

#menu ul li:hover a, #menu ul li:hover div{
    background:#191c1f;
}
#menu ul li a:hover {
    color:#444;
}

#menu ul li:hover div{
    display:inline;
}

#menu ul li.active:hover a {
    background:#FFF;
    color:#000;
}

#menu ul li div {
    display:none;
    position:absolute;
    height:25px;
    width:100%;
    z-index:99;
    left:0;
}


#menu ul li div ul {
    position:absolute;
    left:30px;
}

#menu ul li div ul li a {
    padding: 3px 10px 3px 10px;
}

下拉菜单：根据父级位置定位子级链接

1 个答案: