title: Dropdown Menu shifted to the right
body: <p>I have a dropdown menu that is working well except for one minor bug that I cannot solve.</p>
  
  <p>The first dropdown menu item appears normally. However, the second dropdown menu item is shifted slightly to the right. I am guessing that the margin-right that I set to the link caused the dropdown menu to shift slightly to the right. If that is the case, what can I do to go around the problem?</p>
  
  <p>It's a simple nav menu that sets the position of the dropmenu item to absolute, and is hidden by the parent element's overflow:hidden feature. On hover, the dropdown menu is brought into view with overflow:visible.</p>
  
  <p>The live site is here -> <a href="http://startups.maxnathaniel.com/" rel="nofollow">nav menu</a></p>
  
  <p>CSS</p>
  
  <pre><code>#mainMenu {
      position: relative;
  }
  
  #mainMenu ul {
      list-style: none;
      float: right;
      background-color: #FFFFFF;
  }
  
  #mainMenu ul li {
      position: relative;
      display: inline;
      float: left;
      /*padding-right: 1.5em;*/
      font-size: 1.2em;
      zoom:1;
      overflow: hidden;
  }
  
  #mainMenu&gt;ul&gt;li {
      line-height: 2em;
  }
  
  #mainMenu ul li:hover {
      overflow: visible;
  }
  
  #mainMenu ul li a {
      float: left;
      text-decoration: none;
      color: black;
      padding: 0 1em;
  }
  
  #mainMenu&gt;ul&gt;li:last-child a {
      padding:0.4em 1em 0.4em 1em;
      border-radius:4px;
      background-color: #00b200;
      color: #FFFFFF;
  }
  
  #mainMenu ul li a:hover{
      text-decoration: none;
      color: rgb(42, 160, 239);
  }
  
  #mainMenu ul ul{
      position: absolute;
      top: 2em;
      left: 60%;
      width: 10em;
      margin-left: -3em;
      height: auto;
      border: solid #CCC;
      border-width: 0 1px 1px;
  }
  
  #mainMenu ul ul:first-child{
      padding-top: 2em;
  }
  
  #mainMenu ul ul li,
  #mainMenu ul ul a {
      display:block;
      float:none;
      border:0;
      box-shadow:none;
      text-align:center;
      font-size: 1em;
      padding: 0.4em;
      text-align: left;
  }
  
  #mainMenu ul ul li:first-child {
      border-top:1px solid rgb(72, 147, 196);
  }
  
  #mainMenu ul ul li {
      border-top: 1px solid #e9e9e9;
  }
  
  #mainMenu a:active,
  #mainMenu a:focus,
  #mainMenu a:hover {
      background:#F2F6FA;
      color:#333;
  }
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code> &lt;div id="nav-row"&gt;
              &lt;h1&gt;
                  &lt;a href="\"&gt;
                      Corporate Site
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/h1&gt;
  
              &lt;div id="mainMenu"&gt;
                  &lt;a href="#mainMenu" class="showMenu"&gt;&lt;/a&gt;
                  &lt;a href="#" class="hideMenu"&gt;&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="About"&gt;About&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li class="company"&gt;&lt;a href="#"&gt;Company Profile&lt;/a&gt;&lt;/li&gt;&lt;li class="team"&gt;
                          &lt;a href="#"&gt;The Team&lt;/a&gt;&lt;/li&gt;&lt;li class="linsux"&gt;
                          &lt;a href="#"&gt;Pricing Packages&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Services"&gt;Services&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li class="webDesign"&gt;&lt;a href="#"&gt;Websites&lt;/a&gt;&lt;/li&gt;&lt;li class="Emails"&gt;
                          &lt;a href="#"&gt;Landing Pages&lt;/a&gt;&lt;/li&gt;&lt;li class="Logos"&gt;
                          &lt;a href="#"&gt;Logos&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;&lt;/li&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="Case Studies"&gt;Case Studies&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
                  &lt;a href="Blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
                  &lt;a href="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
                  &lt;a href="Free Web Analysis"&gt;Free Web Analysis&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>