Html 导航子菜单可以'；不要居中

到目前为止，我已经做了一个导航，如下所示

HTML

这是。

---

我尝试使用

文本对齐：居中，
垂直对齐：中间在那里，问题是子菜单看起来不太好。有什么想法吗？
您无法重置默认分配给UL元素的填充

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

每个ul元素的左侧都有一些默认的填充以显示金条，因此当您将“列表样式”设置为“无”时，您必须删除左侧的填充以显示中间的项目，
只需将ul的左侧填充设置为0，这样下拉菜单就可以工作了

我已经添加了一个类属性'subm'到你的ul，使你的下拉菜单，并应用填充左：0；现在可以了


#topNav{宽度：100%；}
#topNav ul{文本对齐：居中；}
#topNav ul li{cursor:pointer；-webkit转换：padding.05s linear；-moz转换：padding.05s linear；-ms转换：padding.05s linear；-o转换：padding.05s linear；转换：padding.05s linear；}
#topNav ul li.drop{位置：相对；}
#topNav ul>li{显示：内联块；}
#topNav ul li a{border:1px solid#CCC；线条高度：80px；填充：0 20px；高度：80px；颜色：777；-webkit转换：all.1s放松；-moz转换：all.1s放松；-ms转换：all.1s放松；-o转换：all.1s放松；转换：all.1s放松；}
#topNav ul li ul li{宽度：125px；填充：10px 5px；边距：0px 10px；颜色：#777；文本对齐：中心；-webkit边框半径：4px；-moz边框半径：4px；边框半径：4px；-webkit过渡：背景.1s放松；-moz过渡：背景.1s放松；-ms过渡：背景.1s放松；-o过渡：背景.1s放松；过渡：背景.1s放松；}
#topNav ul li li a{边框：无；线条高度：0；填充：0；高度：自动；背景色：#FFF；颜色：#666；}
.dropOut.三角形{宽度：0；高度：0；位置：绝对；边框左侧：8px实心透明；边框右侧：8px实心透明；边框底部：8px实心白色；顶部：-8px；左侧：50%；边框左侧：-8px；}
.dropdown包含{宽度：160px；位置：绝对；z索引：2；左侧：50%；左边距：-80px；顶部：-400px；}
.dropOut{width:160px；padding-bottom:10px；background:white；float:left；position:relative；margin-top:0px；不透明度：0；-webkit-border-radius:4px；-moz-border-radius:4px；border-radius:4px；-webkit-box-shadow:01px 6px-rgba（0,0,0,0,15）；-moz-box-shadow:01px 6px-rgba（0,0,0,0,15）；-webkit转换：全部.1s释放；-moz转换：全部.1s释放；-ms转换：全部.1s释放；-o转换：全部.1s释放；转换：全部.1s释放；}
.dropOut ul li a{文本对齐：居中；}
.辍学ul li:悬停{背景：#f6f6f6；}
#topNav ul li:hover.dropdownContain{top:65px；}
#topNav ul li:hover.underline{边框底色：#777；}
#topNav ul li:hover.drop{opacity:1；边距顶端：8px；}
苏伯姆先生{
左侧填充：0；
文本对齐：居中；
}













#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; }

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