Question

我有一个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;
}

Answer 1

通过导航链接边距删除auto。

更新后的内容 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

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

CSS导航菜单在悬停时移动

3 个答案: