css - 如何使子菜单水平并在其父项下居中？

Question

首先，对于一个被问过很多次的问题，我深表歉意——我确实经历了 stackoverflow 中的所有问题和许多其他在线资源，经过几天的测试、更改和调整——我仍然无法弄清楚我的 css 做错了什么，我无法使子菜单水平并在其父项下居中..？

这是 HTML 和我的自定义 CSS 的链接

http://cssdesk.com/r7gZf

我使用的是 Wordpress 主题，主题的导航 CSS 位于下面的链接中，以防我遗漏了导致问题的内容。

http://cssdesk.com/Th9E9

非常感谢您的帮助-我要疯了..:)

谢谢!

Answer 1

上面的答案是一个有趣的方法，但是第一个 li 没有与 child ul 对齐

您可以尝试这样的操作:CSSDesk

或者另一种解决方案是删除子 ul 的绝对位置并添加一个 div 来伪造主 ul 框阴影:

HTML:

<nav role="navigation" class="site-navigation main-navigation">
    <div class="bar"></div>
    <ul id="menu-menu-1" class="menu">
        <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-28"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/">RESTAURANT</a>
            <ul class="sub-menu left">
                <li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-138"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/menu/">Menu</a></li>
                <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/restaurant-opening-times/">Opening Times</a></li>
                <li id="menu-item-137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-137"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/restaurant-gallery/">Gallery</a></li>
                <li id="menu-item-136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/restaurant-contact-us/">Contact Us</a></li>
            </ul>
        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-25"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/">BAR</a>
            <ul class="sub-menu center">
                <li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/events/">What’s On</a></li>
                <li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/bar-opening-times/">Opening Times</a></li>
                <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/bar-gallery/">Gallery</a></li>
                <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/contact-us/">Contact Us</a></li>
            </ul>
        </li>
        <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-27"><a href="http://51stokescroft.com.gridhosted.co.uk/party-bookings/">PARTY BOOKINGS</a>
            <ul class="sub-menu right">
                <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://51stokescroft.com.gridhosted.co.uk/party-bookings/contact-us-2/">Contact Us</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS:

body {
  position: relative;
}
.main-navigation .bar{
  width: 100%;
  height: 55px;
  position: absolute;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.main-navigation > ul > .menu-parent-item > a::before {
  content: none;
}

.main-navigation ul {
  list-style: none;
  margin: 0 auto 0 auto;
  padding: 0;
  text-align:center;
  overflow: visible;
  background-image: none;
  background-repeat:repeat;

}

.main-navigation li {
  display: inline-block;
  margin-right: 0.75em;
  font-size: 14px;
  font-size: 1.4rem;
  position: relative;
}


.main-navigation a {
  display: block;
  font-family: Lusitana;
  font-size: 10px;
  font-size: 1em;
  margin-right: 0.75em
  text-decoration: none;
  color: #f4e9e1;
  padding: 0.75em 2em;
  line-height: 1;
  position:relative;
}

.main-navigation ul li:hover > a {
  color: #3c2415;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.main-navigation ul li:hover > a {
  color: #3c2415;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.main-navigation li:hover ul {
  display: inline-block;
  position: absolute;

}
.main-navigation li:hover li {
  float: none;
  font-size: 16px;
  font-weight:bold;
  margin-top:3px;
}

.main-navigation li ul {
  display: none;
}

.main-navigation ul ul.right {
  margin-left: -25%;
}

.main-navigation ul ul.left {
  margin-left: -100%;
}


.main-navigation ul ul.center {
  margin-left: -200%;
}

.main-navigation ul ul {
  display: none;
  z-index: 99999;
  margin-top: -1px;
  padding-top: 1px;
  text-align: center;
  white-space: nowrap;
  text-align: center;
  margin-left: -100%;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.main-navigation ul ul li {
  display: inline-block;
}

.main-navigation ul ul a {
  display: block;
  text-align: center;
  font-family: Lusitana;
  font-size: 12px;
  font-size: 1.2rem;
  color: #3c2415;
  padding: 0.75em;
  margin: 0;
  -webkit-box-sizing: none;
  -moz-box-sizing: none;
  box-sizing: none;
  white-space: nowrap;

}

.main-navigation ul ul li:hover > a {
  color: #3c2415;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.scheme-black .main-navigation > ul > li:hover > a {
  text-shadow: none;
}
.scheme-black .main-navigation .sub-menu li, .scheme-black .main-navigation .sub-menu .sub-menu li {
  background: transparent;
}
.scheme-black .main-navigation .sub-menu li:hover {
  background: transparent;
}