首先对一个被问过很多次的问题表示歉意——我认为我确实经历了 stackoverflow 中的所有问题和许多其他在线资源，经过几天的测试、更改和调整——我仍然不能找出我的css做错了什么，我无法让子菜单水平并居中在其父级下方..？
这是 HTML 和我的自定义 CSS 的链接
我正在使用 Wordpress 主题，主题的导航 CSS 在下面的链接中，以防我错过了导致问题的某些内容。
将非常感谢您的帮助-我要疯了.. :)
谢谢！
问问题
4481 次
2 回答
0
你的 ul li ul li 宽度有问题 我让它工作示例
.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;
}
于 2013-11-07T13:32:45.060 回答
0
上面的答案是一个有趣的方法，但第一个 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;
}
于 2013-11-07T13:32:59.143 回答