jquery - 如何将子菜单置于父菜单下方 ``

Question

我正在构建一个有第二级的菜单，该级别显示在父级 <li> 下作为新的水平线/菜单。正确知道第二级何时可见，它从父级开始的位置开始，因此子菜单的第一项直接位于父级 <li> 之下。 。我希望子菜单向左 XX px，以便子菜单的中心位于父菜单 <li> 的中心下方。 。我不确定如何实现这一目标？所以欢迎任何建议，css或jquery，都可以。

我的菜单结构:

<nav role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                MENU
            </button>
            <a class="navbar-brand" href="/"><img src='logo.png' class='logo'></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <div>
            <ul class="nav navbar-nav">
              <li><a href="#">Om rbs</a></li>
              <li><a href="#">Gratis</a></li>
              <li><a href="#">Kurser</a>
                <ul class="nav navbar-nav">
                  <li><a href="#">Foredrag</a></li>
                  <li><a href="#">Workshops</a></li>
                  <li><a href="#">Proces med konsulent</a></li>
                </ul>
              </li>
              <li><a href="#">Bliv Certifikeret</a></li>
              <li><a href="#">Workshops</a></li>
              <li><a href="#">Shop</a></li>
              <li><a href="#">Kontakt</a></li>
              <li><a href="#">Login</a></li>
            </ul>
          </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

还有 CSS

nav a {
    font-size: 16px;
    font-family: 'Open Sans Condensed', 'Open Sans', Helvetica, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
}

nav > div div > div > ul.nav {
    position: relative;
    right: 0;
    float: right;
    z-index: 6;
}

nav > div div > div > ul.nav > li {
    position: relative;
    float: left;
    border-right: solid 1px rgba(255, 255, 255, 0.4);
}

nav > div div > div > ul.nav > li::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -6px;
    display: none;
    content: '';
    width: 12px;
    height: 12px;
    background-color: #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

nav > div div > div > ul.nav > li > a:hover {
    color: #fff;
    background-color: #3e3e3e;
}

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

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

nav > div div > div > ul.navi:first-child {
    border-left: solid 1px rgba(255, 255, 255, 0.4);
}

nav > div div > div > ul.nav > li > ul.nav {
    position: absolute;
    padding: 0;
    top: 100%;
    left: 0;
    list-style: none;
    display: none;
    white-space: nowrap;
    z-index: 7;
}

nav > div div > div > ul.nav > li > ul.nav > li {
    position: relative;
    display: inline-block;
    float: none; 
}

nav > div div > div > ul.nav > li > ul.nav > li::after {
    content: '/';
    position: absolute;
    top: 4px;
    left: 100%;
}

nav > div div > div > ul.nav > li > ul.nav > li:last-child::after {
    content: '';
}

nav > div div > div > ul.nav > li > ul.nav > li > a {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #7c7c7c;
    padding: 4px 15px;
}

nav > div div > div > ul.nav > li > ul.nav > li > a:hover {
    color: #000;
    background-color: transparent;
}

And a codepen of the problem

Answer 1

尝试将其添加到现有的 CSS 规则中:

nav > div div > div > ul.nav > li:hover > ul.nav {
    display: block;
    -webkit-transform: translate(-50%, 0);
    left: 50%;
}

updated codepen