title: CSS Dropdown menu indenting on dropdown
body: <p>The jsfiddle is <a href="http://jsfiddle.net/82V7X/" rel="nofollow noreferrer">here</a></p>
  
  <p>I cannot figure out why there is an 'indent' in the drop down links. Please help? I am not an expert at this, so this is confusing me.</p>
  
  <pre><code>#nav{
      list-style:none;
      font-weight:bold;
      margin-bottom:10px;
  
      float:left;
      width:100%;
  
      position:relative;
      z-index:99;
  
  } 
  #nav li{
      float:left;
      margin-right:10px;
      position:relative;
  }
  #nav a{
      display:block;
      padding:5px;
      color:#fff;
      background:#333;
      text-decoration:none;
  }
  #nav a:hover{
      color:#fff;
      background:#6b0c36;
      text-decoration:underline;
  }
  
  #nav ul{
      background:#fff;
      background:rgba(255,255,255,0);
      list-style:none;
      position:absolute;
      left:-9999px;
  }
  #nav  ul li{
      padding-top:1px;
      float:none;
  }
  #nav ul a{
      white-space:nowrap;
  }
  #nav li:hover ul{
      left:0;
  } 
  #nav li:hover a{
      background:#6b0c36;
      text-decoration:underline;
  }
  #nav li:hover ul a{
      text-decoration:none;
  }
  #nav li:hover ul li a:hover{
      background:#333;
  }
  
  #nav ul{
      background:#fff;
      background:rgba(255,255,255,0);
      list-style:none;
      position:absolute;
      left:-9999px;
  }
  
  #nav ul li{
      padding-top:1px;
      float:none;
  }
  #nav ul a{
      white-space:nowrap;
  }
  #nav li:hover ul{
      left:0;
  }
  #nav li:hover a{
      background:#6b0c36;
      text-decoration:underline;
  }
  #nav li:hover ul li a:hover{
      background:#333;
  }
  </code></pre>
  
  <p>and the <code>html</code> is in the jsfiddle. </p>