CSS 悬停时导航菜单移动

Question

我正在创建一个 Jquery/CSS 导航菜单。我以前遇到过这个问题，但我忘记了我是如何解决的。每次我将鼠标悬停在导航中的 link 上时，整个内容都会向左移动几个像素。有人知道我该如何解决这个问题吗？

这是演示，当它不在我的编辑器中时似乎工作正常。

<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

按您的导航链接边距删除 auto。

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

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

Answer 2

我认为您只需要在悬停元素的样式中更加具体即可。您的嵌套 li 元素正在获得适用于父元素的样式。

我在您的示例中添加了以下样式规则，它似乎修复了您提到的左缩进：

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

注意样式继承。

Answer 3

删除 auto 会起作用，但我认为你遇到的问题是你的导航是 100%，所以当滚动条出现时，它会改变大小。有很多方法可以解决这个问题，一个简单的方法就是让您的导航比 100% - 95% 少一点，例如，在不触及您已有的东西的情况下。所以大小不会受到滚动条的影响。如果您添加边距：0 auto；导航，然后它也会保持居中。

CSS 悬停时导航菜单移动

CSS Navigation Menu moves when hovered

html

css

jquery

layout