Question

以下CSS代码会在容器中创建一个带有一些示例框的NAV栏。

我遇到了悬停的问题，所以我从这里得到了一些建议我加了额外的代码（第二块代码）

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

这个额外的代码运作良好

然而，它对我的DIV boxleft 产生了副作用，因为它不会留下来 - 当我将鼠标移动到NAV栏上时，它随之移动.........我只想在左侧保持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;
    }

修改

小提琴： - http://jsfiddle.net/LUzNm/

Answer 1

不是解决这个创可贴修复问题，而是解决根本问题！

首先，您不需要margin-bottom: 20px这个东西。这绝不是你最初问题的原因。相反，这是因为您的.dropdown栏的高度为40px，但您的实际下拉列表绝对位于41px的顶部。如果浏览器在鼠标超过1px间隙时注册鼠标事件，则下拉列表将关闭。

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

最后，让我们来看看最佳实践。填充可能很有用，但此用例的填充很糟糕。使用line-height来实现<a>标记中的高度和间距而不是填充更容易，更准确，它允许我们取消额外的padding-top和{{ 1}}您网站标题的声明！通过将padding-bottom设置为40px，我们会立即匹配line-height栏的高度（如果您使用的是LESS或SASS，它将成为重用的一个很好的变量）。

尽管如此，这里是更新的小提琴：http://jsfiddle.net/2r5Mz/

我还建议做的另一件事是将整个.dropdown容器移出.dropdown。这样做的原因是#container设置了#container，这可能意味着如果内容的高度不够，则会删除您的下拉菜单。只需将此overflow: hidden移出该div即可解决问题。

悬停jquery - 影响DIV类的NAVbar CSS

1 个答案: