Question

我有一个主导航系统，它在父UL中具有子嵌套的UL - 例如请参阅下面的代码示例。

<ul>
<li>1st level button 1</li>
<li>1st level button 2</li>
<li>1st level button 3
<ul id="thisone">
<li>2nd level button 1</li>
<li>2nd level button 1</li>
</ul>
</li>
<li>1st level button 4</li>
</ul>

我要做的是获取subnav（例如child），UL坐在它的父LI的水平中心 - 所以UL #thisone将水平居中位于ist level button 3 LI之下。

所以，我认为我需要计算出第1级3 LI的宽度，然后使用左侧的一半：-XXpx（第1级3 LI的宽度的一半）使UL #thisone水平居中于下方它...例如从中轴...

这有意义吗？

导航系统是动态的，所以我需要能够计算出相对于正在渲染的UL的父LI的宽度...很高兴在jQuery btw中这样做...

有什么想法吗？

干杯，

Answer 1

是的，jQuery会让事情变得更容易。

<强> HTML

<ul class="nav">
    <li>1st level button 1</li>
    <li>1st level button 2
        <ul>
            <li>2nd level button 1</li>
            ...
        </ul>
    </li>
    <li>1st level button 3
        <ul>
            <li>2nd level button 1</li>
            ...
        </ul>
    </li>
    <li>1st level button 4</li>
</ul>

<强> CSS

ul {
    padding:0;
    margin:0;
    text-align:center;
}

li {
    display:inline-block;
    vertical-align:top;
    position:relative;
}

.nav {
    background:grey;
}

/*.sub-nav {*/
.nav > li > ul {
    background:green;
    position:absolute;
    white-space:nowrap;
    left:50%;
    display:none;
}

.nav > li:hover > ul {
    display:block;
}

<强> JS

$(".nav > li > ul").each(function() {
    var $element = $(this);
    var leftMargin = "-" + ( $element.width() / 2 ) + "px";
    $element.css("margin-left", leftMargin);
});

更新小提琴：http://jsfiddle.net/Varinder/R5D7s/2/

在父LI的水平中心浮动子空间UL

1 个答案: