CSS导航菜单在悬停时移动

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?

我有一个Jquery / CSS导航菜单,我现在正在创建。我以前遇到过这个问题,但我忘记了我是如何解决这个问题的。每当我将鼠标悬停在导航链接上时,整个事物就会向左移动几个像素。谁知道我怎么解决这个问题?

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;
}

3 个解决方案

#1

Remove auto by your nav-links margin.

通过导航链接边距删除自动。

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

更新的FIDDLE https://jsfiddle.net/8555tz0d/2/

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

#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.

我认为你需要在悬停元素方面更加具体。嵌套的li元素也会获得适用于父元素的样式。

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.

只需注意样式继承。

#3

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.

删除自动将起作用,但我认为你的导航问题是你的导航是100%,所以当出现滚动条时,它会改变大小。有很多方法可以修复它,一个简单的方法,没有触及你已经拥有的东西,将使你的导航少于100% - 例如95%。因此滚动条不会影响大小。如果你添加保证金:0 auto;也导航,然后它也将保持中心。

#1