CSS Drop Down Menu : nav ul ul li Moved to Right

Question

Here is an image :

The problem is the nav ul ul li moved to the right, as seen in the image, the tab "Contact" moved to the right, and thus the size was not what I want. I want the tab "Contact" to have the same size of "About".

This is the code of mine :

(HTML)

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</nav>

(CSS)

/* Basic Styling */

a {
  text-decoration:none;
  color:inherit;
}

/* Menu Styling */

nav > ul > li {
  display:inline-block;
  width:200px;
  height:50px;
  line-height:50px;
  margin:0px;
  padding:0px;
  background-color:#dddddd;
  text-align:center;
}

nav ul li:hover {
  background-color:#aaaaff;
}

nav ul ul {
  display:none;
}

nav ul li:hover > ul {
  display:block;
  position:relative;
}

nav ul li:hover > ul > li {
  display:block;
  width:400px;
  height:80px;
  line-height:80px;
  padding:0px;
  margin:0px;
  text-align:center;
  position:relative;
}

nav ul li {
  float: left;
}

nav ul ul li,
nav ul ul li a {
  display:block;
}

Fiddle

Answer 1

The problem was that the width and heights for the list items in the inner ul were different than the ones in the outer ul. To fix the indentation I set padding left to 0 for your inner ul.

The code below should work. Also here is a link to my codepen http://cdpn.io/ivJxc

/* Basic Styling */

a {
  text-decoration:none;
  color:inherit;
}

/* Menu Styling */

nav > ul > li {
  display:inline-block;
  width:200px;
  height:50px;
  line-height:50px;
  margin:0px;
  padding:0px;
  background-color:red;
  text-align:center;
}

nav ul li:hover {
  background-color:#aaaaff;
}

nav ul ul {
    display:none;
    padding-left:0; 
}

nav ul li:hover > ul {
  display:block;
  position:relative;
}

nav ul li:hover > ul > li {
  display:block;
  width:200px;
  height:50px;
  line-height:50px;
  padding:0px;
  text-align:center;
}

nav ul li {
  float: left;
}

Answer 2

Hi you need to add one additional rule, it is something like below

ul li ul {
  padding: 0;
  position: absolute;
  left: 0;
  width: 200px;
}

simply add this rule in, then it will work. I consider it is better to give a rule on ul li ul, as it is the container of its li. Later, you can have more control over it.

check the jsFiddle http://jsfiddle.net/wenbolovesnz/J7T9M/

Answer 3

nav ul ul li{
    width: 200px;
    background-color:#dddddd;
}
nav ul ul {
    padding: 0;
  display:none;
}