Question

我到目前为止已做过导航，如下所示。

HTML

<div id="topNav">
            <ul>
                <li><a href="#">View</a></li>
                <li class="drop">
                    <a href="#">You</a>
                    <div class="dropdownContain">
                        <div class="dropOut">
                            <div class="triangle"></div>
                            <ul>
                                <li> <a href="#"> Plan </a> </li>
                                <li> <a href="#"> Plan </a> </li>
                                <li> <a href="#"> Plan </a> </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>

CSS

#topNav {width: 100%;}
#topNav ul {text-align: center;}
#topNav ul li {cursor: pointer;-webkit-transition: padding .05s linear;-moz-transition: padding .05s linear;-ms-transition: padding .05s linear;-o-transition: padding .05s linear;transition: padding .05s linear;}
#topNav ul li.drop {position: relative;}
#topNav ul > li {display: inline-block;}
#topNav ul li a {border:1px solid #CCC;line-height: 80px;padding: 0 20px;height: 80px;color: #777;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;}
#topNav ul li ul li {width: 125px;padding: 10px 5px;margin: 0px 10px;color: #777;text-align:center;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-transition: background .1s ease-out;-moz-transition: background .1s ease-out;-ms-transition: background .1s ease-out;-o-transition: background .1s ease-out;transition: background .1s ease-out;}
#topNav ul li ul li a {border:none;line-height:0;padding:0;height:auto;background-color:#FFF;color:#666;}
.dropOut .triangle {width: 0;height: 0;position: absolute;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid white;top: -8px;left: 50%;margin-left: -8px;}
.dropdownContain {width: 160px;position: absolute;z-index: 2;left: 50%;margin-left: -80px; top: -400px;}
.dropOut {width: 160px;padding-bottom:10px;background: white;float: left;position: relative;margin-top: 0px;opacity: 0;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);box-shadow: 0 1px 6px rgba(0,0,0,.15);-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;}
.dropOut ul li a {text-align:center;}
.dropOut ul li:hover {background: #f6f6f6;}
#topNav ul li:hover .dropdownContain { top: 65px; }
#topNav ul li:hover .underline { border-bottom-color: #777; }
#topNav ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

这是JSFIDDLE。我尝试在那里使用text-align:center;，vertical-align:middle;，问题是subMenu看起来不太好看。有什么想法吗？

Answer 1

您错过了将默认情况下分配的填充重置为UL元素

#topNav ul {
    text-align:center;
    padding:0;   /* this one was missing */
    /* margin:0; /* uncomment if needed  */
}

<强> updated fiddle

Answer 2

每个ul元素在左侧都有一些默认填充以显示bullits，所以当你将list style设置为none时，你必须删除你的左边填充以在中心显示你的项目，只需设置ul的左侧填充，使您的下拉菜单为0即可生效

我添加了一个类属性＆＃39; subm＆＃39;到您的ul下拉菜单，并应用paddding-left：0;它现在会起作用。

＆＃13;

#topNav {width: 100%;}
#topNav ul {text-align: center;}
#topNav ul li {cursor: pointer;-webkit-transition: padding .05s linear;-moz-transition: padding .05s linear;-ms-transition: padding .05s linear;-o-transition: padding .05s linear;transition: padding .05s linear;}
#topNav ul li.drop {position: relative;}
#topNav ul > li {display: inline-block;}
#topNav ul li a {border:1px solid #CCC;line-height: 80px;padding: 0 20px;height: 80px;color: #777;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;}
#topNav ul li ul li {width: 125px;padding: 10px 5px;margin: 0px 10px;color: #777;text-align:center;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-transition: background .1s ease-out;-moz-transition: background .1s ease-out;-ms-transition: background .1s ease-out;-o-transition: background .1s ease-out;transition: background .1s ease-out;}
#topNav ul li ul li a {border:none;line-height:0;padding:0;height:auto;background-color:#FFF;color:#666;}
.dropOut .triangle {width: 0;height: 0;position: absolute;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid white;top: -8px;left: 50%;margin-left: -8px;}
.dropdownContain {width: 160px;position: absolute;z-index: 2;left: 50%;margin-left: -80px; top: -400px;}
.dropOut {width: 160px;padding-bottom:10px;background: white;float: left;position: relative;margin-top: 0px;opacity: 0;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);box-shadow: 0 1px 6px rgba(0,0,0,.15);-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;}
.dropOut ul li a {text-align:center;}
.dropOut ul li:hover {background: #f6f6f6;}
#topNav ul li:hover .dropdownContain { top: 65px; }
#topNav ul li:hover .underline { border-bottom-color: #777; }
#topNav ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
.subm{
    padding-left: 0;
    text-align: center;
}

＆＃13;

<div id="topNav">
			<ul>
				<li><a href="#">View</a></li>
				<li class="drop">
					<a href="#">You</a>
					<div class="dropdownContain">
						<div class="dropOut">
							<div class="triangle"></div>
							<ul class='subm'>
								<li> <a href="#"> Plan </a> </li>
								<li> <a href="#"> Plan </a> </li>
								<li> <a href="#"> Plan </a> </li>
							</ul>
						</div>
					</div>
				</li>
				<li><a href="#">Help</a></li>
			</ul>
		</div>

＆＃13;

导航子菜单无法居中

2 个答案: