css - 悬停 jquery - 影响 DIV 类的 NAVbar CSS

Question

以下 CSS 代码创建了一个导航栏，其中包含容器中的一些示例框。

我在悬停时遇到问题，所以根据这里的一些建议，我包含了额外的代码(第二个代码块)

   .dropdown>ul>li>a:hover {margin-bottom:20px;}

这个额外的代码运行良好

然而，它对我的​​ DIV boxleft 产生了副作用，因为它不会留在左侧 - 当我将鼠标移过导航栏时，它会随之移动.........我只想将 DIV boxleft 放在左侧。你能帮我吗？非常感谢。

  /* Navigation Style */ 
    .dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; } 

    /* Basic List Styling (First/Base Level) */ 
    .dropdown ul {padding:0; margin:0; list-style: none;} 
    .dropdown ul li {float:left; position:relative;} 
    .dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;} 
    .dropdown>ul>li>a:hover {margin-bottom:20px;}
    .dropdown ul li a:hover {color:#ffffff; background:#232323;} 

    /* Second Level Drop Down Menu */ 
    .dropdown ul li ul {display: none;} 
    .dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;} 
    .dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; } 
    .dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;} 

    /* Third Level Drop Down Menu */ 
    .dropdown ul li:hover ul li ul {display: none;} 
    .dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; } 

    #container {
    overflow:hidden;
    background-color:yellow;
    width:1250px;
    padding 10px 10px 10px 10px;
    border:1px solid #666666;
    margin: 0 auto;
    }


    .boxleft {
    float:left;
    background-color:blue;
    margin-top:30px;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
    width:600px;
    border:1px solid #666666;
    z-index:1;
    } 

编辑

在这里 fiddle :- http://jsfiddle.net/LUzNm/

Answer 1

与其解决这个创可贴式的修复，不如解决根本问题!

开始时，您不需要 margin-bottom: 20px事物。那从来都不是您最初问题的原因。相反，这是因为您的 .dropdown酒吧是40px高度，但您的实际下拉菜单绝对位于 41px从一开始。如果浏览器在鼠标悬停在该 1px 间隙上时注册了鼠标事件，则下拉菜单将关闭。

现在，您似乎想要那个 41px 所以 border: 1px solid #666666在你的 .dropdown栏会出现。我们仍然可以这样做，但我们只是将该边框添加到您的悬停菜单中。

最后，让我们开始一些最佳实践。填充可能很有用，但此用例的填充很糟糕。使用 line-height 更容易也更准确在我们的 <a> 中实现高度和间距标签而不是填充，它允许我们取消额外的 padding-top和 padding-bottom在您的网站标题上声明!通过设置 line-height到 40px，我们立即匹配 .dropdown 的高度bar 始终存在(如果您使用的是 LESS 或 SASS 之类的东西，它会成为一个很好的重用变量)。

综上所述，这是更新后的 fiddle :http://jsfiddle.net/2r5Mz/

我还建议做的另一件事是移动整个 .dropdown容器出 #container .原因是#container有overflow: hidden设置，这可能意味着如果内容的高度不够，则砍掉你的下拉菜单。只需移动这个 .dropdown从那个 div 中解决了这个问题。