如何使子菜单水平并在其父级下方居中？答案

【问题标题】：How to get submenu horizontal and centered under its parent?如何使子菜单水平并在其父级下方居中？
【发布时间】：2013-11-07 13:07:32
【问题描述】：

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

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

http://cssdesk.com/r7gZf

我使用的是 Wordpress 主题，主题的导航 CSS 在下面的链接中，以防我错过了导致问题的某些内容。

http://cssdesk.com/Th9E9

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

谢谢！

【问题讨论】：

标签： css navigation navbar submenu

【解决方案1】：

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

你可以试试这样的：CSSDesk

或者另一种解决方案是删除你的 sub 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;
}

【讨论】：

谢谢！您和 Szymon 的更正都解决了居中问题 - 我会阅读它们并理解它们 - 非常感谢！我怎样才能让子菜单水平？
我已编辑我的答案以将其水平显示为子菜单。你是这个意思吗？
感谢您在 cssdesk 上进行回检- 它是水平的- 是的- 但它是根据菜单居中的，而不是子菜单的父项.. 这有意义吗？但是..我将所有内容都输入了我的网站，但它并没有做它在 cssdesk 上所做的事情 - 我认为某些东西可能会被我没有解决的原始主题的 css 覆盖？在下面的 cssdesk 链接中，我在您的 css 下添加了您的最新代码和主题 css，以 /* =Navigation 开头 - 您可以在那里看到网站上发生了什么？ =/抱歉有问题！ :}cssdesk.com/zPCUr
据我所知，没有干净的方法可以做到这一点，因为你对父母是绝对的，需要调整你的位置，而且孩子的数量和父母的大小会有所不同.只有在这个编辑版本中才能使用父类上的类
啊，它有效！有用！！！非常感谢你，你的时间和精力，你拯救了我的理智，我永远不会得到那个..只需要锻炼并了解你在那里做了什么！ :) 我仍然不太确定这个网站是如何运作的，但我认为在我获得 15 名声望之前我不能“投票”你。当有一天我有这个时，我会回到这里为你投票。再次感谢，我真的无法表达我的感激之情！ :)

【解决方案2】：

你的 ul li ul li a width 有问题我让它工作了EXAMPLE

    .main-navigation ul ul a { 
       text-align: center;
       font-family: Lusitana;
       font-size: 12px; 
       font-size: 1.2rem; 
       color: #3c2415;
       width: 80px;        //added  
       padding: 10px 0;    //added
       -webkit-box-sizing: none; 
       -moz-box-sizing: none; 
       box-sizing: none;
       white-space: nowrap;

}

【讨论】：

谢谢！您和 Thomas 的更正都解决了居中问题 - 我会阅读它们并理解它们 - 非常感谢！我怎样才能让子菜单水平？ T