下拉菜单对齐问题

Question

我想在我的网站上集成类似to this one的菜单。 问题在于，由于某些原因，我不能将菜单的子项对齐到主菜单项的左侧，就像代码笔版本一样。 看我的JSFiddle：http://jsfiddle.net/Tw9Er/ 有什么问题？感谢

JSFiddle的外观如何：

它应该是什么样的（如on code pen）：

JS：

  function dropDown() {
  $(this).find('ul').stop().slideToggle();
  $(this).find('ul').parent().find('a').toggleClass('activeNav');
  $(this).find('ul > li > a').removeClass('activeNav');
}

$('nav ul li ul').hide();
$('nav ul li').mouseenter(dropDown);
$('nav ul li').mouseleave(dropDown);

CSS：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100);

html, body {width: 100%; height: 100%}
body {font-family: 'Roboto'; background: url(http://www.prestonise.com/images/nyc.jpg) no-repeat center center; background-size: cover}
body:after {
  content : "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.1);
  background-size: cover;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  -webkit-animation: subtleFade 25s infinite;
  animation: subtleFade 25s infinite
}

@-webkit-keyframes subtleFade
{
  0% {background: rgba(0,0,0,0)}
  50% {background: rgba(0,0,0,0.3)}
  100% {background: rgba(0,0,0,0)}
}
@keyframes myfirst
{
  0% {background: rgba(0,0,0,0)}
  50% {background: rgba(0,0,0,0.3)}
  100% {background: rgba(0,0,0,0)}
}




* {box-sizing: border-box}

.wrapper {position: relative; z-index: 5; height: 100%; padding: 20px}
header {margin-top: 20px; text-align: center}
header h1 {font-weight: 100; font-size: 2.5em; color: rgba(255,255,255,0.75)}

nav {margin: 20px auto}
nav ul li {display: inline-block; margin-right: -4px; margin-left: 5px; vertical align: top}
nav a {padding: 7px 10px; text-decoration: none; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0); border-radius: 5px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px}
nav a:hover {background: rgba(0,0,0,0.25)}
.activeNav {background: rgba(0,0,0,0.25)}
nav ul li ul {position: absolute; display: block; margin-top: 5px; border-radius: 5px; border-top-left-radius: 0; background: none; padding-top: 5px}
nav ul li ul li {display: block; float: none; margin: 0; padding: 0}
nav ul li ul li a {display: block; text-align: left; color: rgba(255,255,255,0.9); text-shadow: 0 1px rgba(0,0,0,0.33); padding: 10px}
nav ul li ul li a:hover {background: rgba(20,150,220,0.5); color: white; text-shadow: 0 1px rgba(0,0,0,0.5)}
.hover a {display: block;}
.hover span { color: rgba(255,255,255,0.9); background: rgba(20,150,220,0.5); border-radius: 5px; position: absolute; display: block; margin: 5px 0 0 -57px; padding: 10px; font-size: 13px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; cursor: default;}

article {width: 80%; display: block; margin: 0 auto; text-align: center}
article span {font-size: 128px; color: rgba(255,255,255,0.75)}
article span span {font-size: 48px; position: absolute; top: 152px; margin-left: -88px; color: rgba(255,255,255,.75)}

footer {position: absolute; bottom: 0px; background: rgba(0,0,0,0.8); width: 100%; padding: 20px 0; text-align: center; color: #ddd; font-weight: 300}
footer span.fa {color: #ea0; display: block; font-size: 25px; margin-bottom: 10px}

Answer 1

将padding-left元素的ul设置为0。它是用小提琴修复的。

http://jsfiddle.net/Tw9Er/1/

编辑：

如果您检查该元素，您会看到40px左侧有-webkit-padding-start: 40px填充。所以基本上，要么设置padding-left或-webkit-padding-start来解决问题。

它在codepen上工作的原因是因为padding: 0文件中的reset.css行：

Answer 2

尝试应用此;

ul {
    padding-left: 0px !important;
}

如果你认为它们有刺激性，试试这个; http://meyerweb.com/eric/tools/css/reset/

并表示使用！important不是一个好的实践 - 更好地看看它被覆盖并替换它。