我需要创建此屏幕截图所示的菜单:
因此,您将光标悬停在带有两个子区域的大子菜单上。对于与我的问题类似的例子,我们将感到高兴。感谢您的回答!
答案 0 :(得分:0)
这是一个非常简单的示例,可以帮助您入门。它当然需要更多的样式和更多的内容,但这应该为您提供所有工具,使您可以在菜单中使用鼠标悬停下拉菜单
HTML:
<header>
<a href="/url">
Hover to see dropdown
</a>
<div>
<section></section>
<section></section>
</div>
</header>
CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50px;
}
header > a {
padding: 0 2em;
height: 50px;
display: grid;
place-content: center;
}
header > div {
display: hidden;
background-color: white;
}
a:hover + div {
display: inherit;
}
答案 1 :(得分:0)
类似的事情应该起作用。它利用导航栏标签“下拉”中的:hover
属性来显示更多内容(在这种情况下,它只是一些链接)。
HTML:
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
您可以在W3School网站上找到更多信息!