Issue with drop down menu alignment

Question

I'd like to integrate a menu similar to this one on my website. The issue is that for some reason I can't get the sub-items of the menu aligned to the left of the main menu item like on the code pen version. See my JSFiddle: http://jsfiddle.net/Tw9Er/ What is the issue? Thanks

How it looks like on JSFiddle:

How it should look like (like 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

Set padding-left to 0 for your ul element. It was fixed using that on fiddle.

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

EDIT:

If you inspect the element, you will see that you have 40px padding-left from -webkit-padding-start: 40px . So basically, either set the padding-left or -webkit-padding-start to fix the issue.

The reason it works on codepen is because of the padding: 0 line in reset.css file:

Answer 2

Try apply this;

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

If you consider them as irritating try this; http://meyerweb.com/eric/tools/css/reset/

And rember that using !important is not a good practite - better take a look where it is being overwritten and replace it.