CSS 导航菜单在悬停时移动答案

【问题标题】：CSS Navigation Menu moves when hoveredCSS 导航菜单在悬停时移动
【发布时间】：2015-07-22 13:07:54
【问题描述】：

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

这是一个演示，当它不在我的编辑器中时，它似乎运行良好。

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

【问题讨论】：

链接悬停时我看不到菜单移动...

标签： jquery css html layout

【解决方案1】：

将auto 移除到您的导航链接边距。

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

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

【讨论】：

【解决方案2】：

我认为在悬停元素方面，您只需要更具体的样式即可。您嵌套的 li 元素的样式也适用于父元素。

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

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

请注意样式继承。

【讨论】：

【解决方案3】：

删除 auto 会起作用，但我认为你的问题是你的导航是 100%，所以当滚动条出现时，它会改变大小。有很多方法可以修复它，一个简单的方法是让你的导航略低于 100% - 例如 95%，而不触及你已经拥有的东西。所以大小不会受到滚动条的影响。如果你添加 margin: 0 auto;也导航，那么它也会保持居中。

【讨论】：