Dropdowmenu：使用 JQuery 动态地将子菜单与其父级对齐

Question

我有一个下拉菜单，我想做的是动态更改子菜单左侧的填充，以便父级和兄弟级（子菜单）垂直对齐。

这是 HTML：

<nav class="secondary-menu">
<ul class="menu nav navbar-nav secondary">
    <li class="first expanded dropdown">
        <a href="/en/masters-of-science" class="dropdown-toggle">MASTER OF SCIENCE</a>
        <ul class="dropdown-menu">
            <li class="first leaf"><a href="#">Clone of Master of Science in IT Strategic Management</a></li>
            <li class="leaf"><a href="#">Master of Science in Finance and Banking</a></li>
        </ul>
    </li>
    <li class="first expanded dropdown">
        <a href="/en/masters-of-science" class="dropdown-toggle">MASTER OF SCIENCE</a>
        <ul class="dropdown-menu">
            <li class="first leaf"><a href="#">Clone of Master of Science in IT Strategic Management</a></li>
            <li class="leaf"><a href="#">Master of Science in Finance and Banking</a></li>
            <li class="first leaf"><a href="#">Clone of Master of Science in IT Strategic Management</a></li>
        </ul>
    </li>
    <li class="first expanded dropdown">
        <a href="/en/masters-of-science" class="dropdown-toggle">MASTER OF SCIENCE</a>
        <ul class="dropdown-menu">
            <li class="first leaf"><a href="#">Clone of Master of Science in IT Strategic Management</a></li>
            <li class="leaf"><a href="#">Master of Science in Finance and Banking</a></li>
            <li class="first leaf"><a href="#">Clone of Master of Science in IT Strategic Management</a></li>
        </ul>
    </li>
    <li class="first expanded dropdown">
        <a href="/en/masters-of-science" class="dropdown-toggle">MASTER OF SCIENCE</a>
        <ul class="dropdown-menu">
            <li class="first leaf"><a href="#">Clone of Master of Science in IT Strategic Management</a></li>
            <li class="leaf"><a href="#">Master of Science in Finance and Banking</a></li>
        </ul>
    </li>
</ul>           

所以我要做的是将所有子菜单（ul.dropdown-menu）与其父级（li.dropdown）垂直对齐，一般下拉菜单已经完成并且工作正常我只想对齐元素动态的。

我一直在尝试这种方法，但对我不起作用，这个脚本只是将相同的 padding-left 添加到所有子菜单中：

   function submenu_position() {
    var liElements = new Array();
    var count = 0;
    $.each($("#navbar .secondary li"), function () {
        liElements[count] = $(this).width();
        count++;
    });

    $(".secondary .dropdown-menu").css("paddingLeft",    liElements[0]+liElements[1]);

}

非常感谢！

Answer 1

适合您的情况的解决方案：

在你的 CSS 中添加这个：

.navbar-nav .dropdown {position: relative;}
.navbar-nav .dropdown .dropdown-menu {position: absolute; left: 0;}

并删除 .padding 的所有 JavaScript。

更新的 jQuery 版本：

$("head").append('<style>.navbar-nav .dropdown {position: relative;} .navbar-nav .dropdown .dropdown-menu {position: absolute; left: 0;}</style>');

---

替代解决方案

您可以只使用纯 CSS 来显示菜单，而您可以使用 JavaScript 在菜单中进行更改。你想试试这个吗？

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

小提琴：
http://jsfiddle.net/vMuxA/（垂直菜单）
http://jsfiddle.net/vMuxA/1/（水平菜单）