浮动子导航UL在父LI的水平中心

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>

我想做的是让子导航（例如子导航），UL 位于其父 LI 的水平中心 - 因此 UL #thisone 将水平居中位于 ist 级别按钮 3 LI 下方。

所以，我想我需要计算出 1 级 3 LI 的宽度，然后减半并使用 left：-XXpx（一级 3 LI 宽度的一半）使 UL #thisone 水平位于其下方的中心......例如，从中轴...

这有意义吗？

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

有什么想法吗？

干杯

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/