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

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 的解决方案，下面链接的 fiddle 还使 "Over Ons" header 保持活动背景，同时用户将鼠标悬停在 sub-menu 上.

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

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

How to create a nav with a drop-down that overlaps the main content

html

css

nav