CSS Navigation Menu moves when hovered

Question

I have a Jquery/CSS navigation menu that i'm creating right now. I've had this problem before, but i forgot how i fixed it. Every time i hover over a link in the navigation the whole thing moves a few pixels to the left. anybody know how i can fix this?

Here is the demo which seems to be working fine when it's not in my editor.

https://jsfiddle.net/8555tz0d/

<div id="nav">
    <div id="nav_links">
<ul class="dropdown">
  <li>
    <a href="…">4-Color Offset Printing</a>
    <ul>
      <li>
        <a href="…">Monthly Special</a>
      </li>
      <li>
        <a href="…">Bookmarks</a>
      </li>
      <li>
        <a href="...">Brochures / Flyers</a>
      </li>
      <li>
        <a href="...">Brochures w/ Direct Mailing</a>
      </li>
      <li>
        <a href="...">Brochures w/ Free Folding</a>
      </li>
      <li>
        <a href="...">Business Cards</a>
      </li>
       <li>
        <a href="...">Business Cards w/Round Corners</a>
      </li>
       <li>
        <a href="...">Business Cards - Mini</a>
      </li>
       <li>
        <a href="...">Business Cards w/Free Shipping</a>
      </li>
       <li>
        <a href="...">Fold-Over Business Cards</a>
      </li>
       <li>
        <a href="...">Calendars</a>
      </li>
       <li>
        <a href="...">Catalogs</a>
      </li>
       <li>
        <a href="...">CD Inlays w/ Perf</a>
      </li>
       <li>
        <a href="...">CD Inserts</a>
      </li>
       <li>
        <a href="...">Club Flyers</a>
      </li>
       <li>
        <a href="...">Custom Order</a>
      </li>
       <li>
        <a href="...">Door Hangers</a>
      </li>
       <li>
        <a href="...">DVD Inserts</a>
      </li>
       <li>
        <a href="...">DVD/CD Mailers</a>
      </li>
       <li>
        <a href="...">Envelopes</a>
      </li>
       <li>
        <a href="...">Small Flyers</a>
      </li>
       <li>
        <a href="...">Presentation Folders</a>
      </li>
       <li>
        <a href="...">Greeting Cards</a>
      </li>
       <li>
        <a href="...">Hang Tags</a>
      </li>
       <li>
        <a href="...">Labels - Cut Sheets</a>
      </li>
       <li>
        <a href="...">Letterhead</a>
      </li>
       <li>
        <a href="...">Notepads</a>
      </li>
       <li>
        <a href="...">Postcards</a>
      </li>
       <li>
        <a href="...">Postcards w/ Direct Mailing</a>
      </li>
       <li>
        <a href="...">Posters</a>
      </li>
       <li>
        <a href="...">Rack Cards</a>
      </li>
       <li>
        <a href="...">Tear Cards</a>
      </li>
       <li>
        <a href="...">Trading Cards</a>
      </li>
    </ul>
  </li>

  <li>
    <a href="…">Large Format</a>
    <ul>
      <li>
        <a href="…">Banner Stands</a>
      </li>
      <li>
        <a href="…">Digital Posters</a>
      </li>
       <li>
        <a href="...">Presentation Boards</a>
      </li>
       <li>
        <a href="...">Retractable Banner No Display</a>
      </li>
       <li>
        <a href="...">Signage</a>
      </li>
      <li>
        <a href="...">Spider Feet Stand Only</a>
      </li>
      <li>
        <a href="...">Step and Repeat</a>
      </li>
      <li>
        <a href="...">Trade Show Graphics</a>
      </li>
      <li>
        <a href="...">Vehicle Decals</a>
      </li>
      <li>
        <a href="...">Vinyl Banners</a>
      </li>
      <li>
        <a href="...">Vinyl Labels</a>
      </li>
      <li>
        <a href="...">White Canvas</a>
      </li>
      <li>
        <a href="...">Window Cling</a>
      </li>
      <li>
        <a href="...">Window Perf</a>
      </li>
      <li>
        <a href="...">X-Frame Banner No Stand</a>
      </li>
      <li>
        <a href="...">X-Frame With Banner</a>
      </li>
      <li>
        <a href="...">Yard Signs</a>
      </li>
      <li>
        <a href="...">Yard Signs Stakes</a>
      </li>

     </ul>
        <li>
    <a href="…">1 & 2 Color Printing</a>
    <ul>
      <li>
        <a href="…">Brochures / flyers</a>
      </li>
      <li>
        <a href="…">Business Cards</a>
      </li>
       <li>
        <a href="…">Envelopes</a>
      </li>
       <li>
        <a href="…">Letterhead</a>
      </li>
       <li>
        <a href="…">NCR Forms</a>
      </li>
       <li>
        <a href="…">Notepads</a>
      </li>
       <li>
        <a href="…">Postcards</a>
      </li>
       <li>
        <a href="…">Small Flyers</a>
      </li>
      </ul>
      </li>
      <li>
    <a href="…">4-Color Digital Printing</a>
    <ul>
      <li>
        <a href="…">Bookmarks</a>
      </li>
      <li>
        <a href="…">Brochures / Flyers</a>
      </li>
      <li>
        <a href="…">Bumper Stickers</a>
      </li>
      <li>
        <a href="…">Business Cards</a>
      </li>
      <li>
        <a href="…">Calendars</a>
      </li>
      <li>
        <a href="…">Catalogs</a>
      </li>
      <li>
        <a href="…">CD Inlays w/ Perf</a>
      </li>
      <li>
        <a href="…">CD Inserts</a>
      </li>
      <li>
        <a href="…">Club Flyers</a>
      </li>
      <li>
        <a href="…">DVD Inserts</a>
      </li>
      <li>
        <a href="…">Envelopes</a>
      </li>
      <li>
        <a href="…">Greeting Cards</a>
      </li>
      <li>
        <a href="…">Hang Tags</a>
      </li>
      <li>
        <a href="…">Labels - Cut Sheet</a>
      </li>
      <li>
        <a href="…">Letterhead</a>
      </li>
      <li>
        <a href="…">Magnets</a>
      </li>
      <li>
        <a href="…">Plastic</a>
      </li>
      <li>
        <a href="…">Postcards</a>
      </li>
      <li>
        <a href="…">Posters</a>
      </li>
      <li>
        <a href="…">Rack Cards</a>
      </li>
      <li>
        <a href="…">Small Flyers</a>
      </li>
      <li>
        <a href="…">Tear Cards</a>
      </li>
      <li>
        <a href="…">Trading Cards</a>
      </li>
      <li>
        <a href="…">T-Shirts</a>
      </li>
      </ul>
      </li>
       <li>
    <a href="…">Roll Labels</a>
    <ul>
      <li>
        <a href="…">Roll Labels</a>
      </li>
      </ul>
      </li>
       <li>
    <a href="…">Services</a>
    <ul>
      <li>
        <a href="…">About Us</a>
      </li>
      <li>
        <a href="…">Contact Us</a>
      </li>
      <li>
        <a href="…">Coupons</a>
      </li>
      <li>
        <a href="…">File Upload</a>
      </li>
      <li>
        <a href="…">Artwork Preparation</a>
      </li>
      <li>
        <a href="…">Go Green</a>
      </li>
      <li>
        <a href="…">Every Door Direct Mail</a>
      </li>
      <li>
        <a href="…">Lost Password Help</a>
      </li>
      <li>
        <a href="…">Privacy & Security</a>
      </li>
      <li>
        <a href="…">Terms & Conditions</a>
      </li>
      </ul>
      </li>

      </li>
</ul>

</div>
</div>


#nav {
    background-color:#343232;
    width:100%;
    height:44px;
}
#nav_links {
    background-color:#343232;   
    height:44px;
    width:960px;
    margin:0px auto;
}
#nav li a {
    color:#FFF;
}
#nav li ul a {
    color:#000; 
}

#nav li:nth-child(1):hover {
    background:#0F0;
    text-decoration:none;
    padding:0px;
}
#nav li:nth-child(2):hover {
    background:#0F0;
    text-decoration:none;
    padding:0px;
}       

.dropdown,
.dropdown ul,
.dropdown li{
    height:44px;
  margin  : 0;
  padding : 0px 0px 0px 0px;
  color:#FFF;
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.dropdown ul{
  display  : none;
  position : absolute;
  top      : 100%;
  left     : 0;
  z-index  : 1;
}

[dir=rtl] .dropdown ul{
  left  : auto;
  right : 0;
}

.dropdown ul ul,
[dir=rtl] .dropdown ul .dropdownLeftToRight ul{
  top   : 0;
  left  : 100%;
  right : auto;
}

[dir=rtl] .dropdown ul ul,
.dropdown ul .dropdownRightToLeft ul{
  left  : auto;
  right : 100%;
}

.dropdown li{
    margin-left:20px;
  position        : relative;
  display         : block;
  list-style-type : none;
}

.dropdown > li{
  display : inline-block;
}

.dropdown a,
.dropdown span{
  display         : block;
  text-decoration : none;
  white-space     : pre;
}

.dropdown li:hover > ul{
  display : block;
}

.dropdownVertical{
  display : inline-block;
}

.dropdownVertical > li{
  display : block;
}

.dropdownVertical ul{
  top  : 0;
  left : 100%;
}

[dir=rtl] .dropdownVertical ul{
  left  : auto;
  right : 100%;
}

.dropdownJavaScript li:hover > ul{
  display : none;
}

.dropdownJavaScript li.dropdownOpen > ul{
  display : block;
}

Answer 1

Removing auto will work, but the problem you have, I think, is that your nav is 100%, so when a scrollbar appears, it changes the size. There are many ways to fix it, a simple one, without touching what you already have, would be to make your nav a little less than 100% - 95% for example. So the size won't be affected by the scrollbar. And if you add margin: 0 auto; to nav also, then it'll stay centered as well.

Answer 2

I think you just need to be more specific in your styles when it comes to hover elements. Your nested li elements are getting styles that apply to the parents as well.

I added the following style rules to your example and it seemed to fix the left indent you mentioned:

.dropdown li ul li{
    margin-left:0px;
    padding-left:20px;
}
#nav .dropdown li ul li:hover{
    padding-left:20px;
}

Just be careful of style inheritance.

Answer 3

Remove auto by your nav-links margin.

UPDATED FIDDLE https://jsfiddle.net/8555tz0d/2/

#nav_links {
    background-color:#343232;   
    height:44px;
    width:960px;
    margin:0px;
}