悬停查询-NAV栏CSS影响DIV类

Question

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

我对Hover的停留有问题，所以根据这里的一些建议，我包括了额外的代码(第二块代码)

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

这个额外的代码运行良好

然而，它对我的DIVboxleft产生了副作用，因为它不会向左移动——当我在NAV栏上移动鼠标时，它会随之移动……我只想将DIVboxleft保持在左手边。你能帮忙吗？非常感谢。

/* 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 here:-http://jsfiddle.net/LUzNm/

Answer 1

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

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

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

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

话虽如此，以下是最新的小提琴：http://jsfiddle.net/2r5Mz/

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