如何使用与主内容重叠的下拉菜单创建导航栏

Question

我一直在尝试在导航栏中创建子菜单。我在<li>中创建了第二个<ul>。当我将鼠标悬停在<li>上时，它会得到更大的宽度（不知道为什么），而我遇到的第二个问题是，此子菜单位于我的导航中。所以我只是得到一个更大的height。

这就是我得到：

我想实现（用漆制造）：

我已经做了的jsfiddle，这是demo

Answer 1

只是有在您的css中的#dropdown规则中添加position: absolute;。我已经更新了微小的改动了的jsfiddle您#dropdown

编辑：更新的jsfiddle，包括你的第二个要求只是要悬停添加规则#overOns（见一击），不需要的jQuery/JavaScript的。由于#dropdown是overOns元素里面，这是所有你需要

#overOns:hover { 
    background-color: #bd003a; 
} 

https://jsfiddle.net/qp0k7rsu/3/

Answer 2

大厦由@philr的解决方案，连接到下面捣鼓也保持与活跃的“过”起家头背景，而用户悬停在子菜单上。

需要一些JavaScript来实现该功能，但不是很多。我所添加的是两个事件监听器。

https://jsfiddle.net/freginold/zr7vsp3z/

var dropdown = document.getElementById('dropdown'); 
var overOns = document.getElementById('overOns'); 

dropdown.addEventListener('mouseover', function() { 
    overOns.style.backgroundColor = "#bd003a"; 
}); 

dropdown.addEventListener('mouseout', function() { 
    overOns.style.backgroundColor = "#da0043"; 
});