悬停查询 - 导航栏CSS影响DIV类

以下CSS代码创建一个包含容器内某些样本框的NAV栏。悬停查询 - 导航栏CSS影响DIV类

我有这么从这里一些建议我包括额外的代码（代码第二挡了下来）

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

编辑

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

来源

2013-12-21 user2635961

请提供一个jsfiddle ....描绘你的问题！ – NoobEditor

提供标记，更好拿出在[jsfiddle.net（http://jsfiddle.net） –

请参阅小提琴小提琴 - http://jsfiddle.net/LUzNm/ – user2635961

而不是针对这个创可贴修复，让我们解决问题的根源！

首先，你不需要那么margin-bottom: 20px事情。这从来不是你最初的问题的原因。相反，这是由于你的.dropdown酒吧是在高度40px，但实际的下拉列表中的绝对定位在41px从顶部。如果浏览器在鼠标悬停在1像素以上时注册鼠标事件，则下拉菜单将关闭。

现在，好像你想要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即可解决问题。

来源

2013-12-21 16:36:27

悬停查询 - 导航栏CSS影响DIV类

回答

相关问题