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

Question

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

这就是我得到的：

我想要实现的目标（用油漆制作）：

我做了一个jsfiddle，这是demo

Answer 1

只需在css中的position: absolute;规则中添加#dropdown即可。我已经通过对#dropdown

进行了一些小的更改来更新了jsfiddle

编辑：更新jsfiddle以包含您的第二个请求，只需在#overOns悬停时添加规则（请参阅打击），不需要jquery / javascript。由于#dropdown位于overOns元素内，因此您只需要

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

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

Answer 2

在@philr的解决方案的基础上，当用户将鼠标悬停在子菜单上时，链接到下方的小提琴也会将“Over Ons”标题保留为活动背景。

实现该功能需要一些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";
});