* {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
justify-content: space-around;
background-color: #1A2456;
padding: 1em;
align-items: center;
margin: 10px;
}
h2 {
color: #FF8B68 ;
}
li {
list-style: none;
}
li a, h2 a {
text-decoration: none;
color: #FF8B68;
}
.how {
margin-left: 31em;
}
.dropdown ul {
display: none;
}
.workflow:hover .dropdown ul {
display: unset;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<header>
<div class="navbar">
<h2> <a href="#">MONOGRAM</a> </h2>
<li><a href="#" class="how">HOW IT WORKS</a></li>
<li><a href="#" class="workflow">WORKFLOW</a>
<div class="dropdown">
<ul>
<li>PHOTO EDITING</li>
<li>VIDEO & FILMMAKING</li>
<li>MUSIC & AUDIO</li>
<li>VIRTUAL PRODUCTION</li>
</ul>
</div>
</li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#"><i class="gg-shopping-bag"></i></a></li>
</div>
</header>
</body>
</html>
当我将鼠标悬停在工作流链接上时,我想显示下拉菜单的内容,该下拉菜单的类名称为 .dropdown
,但是当我将鼠标悬停在工作流链接上时,什么也没有发生。
我哪里做错了?是否使用了错误的选择器?如果是这样,我应该使用什么?
答案 0 :(得分:1)
您的代码有几个问题需要更正。
首先,您用 ul
隐藏 .dropdown ul
,但在任何情况下都不再显示。
并且您正在尝试选择 .dropdown
的 child .workflow
,但它不是孩子,而是 兄弟姐妹。因此,您需要将下拉菜单移动到 .workflow
或将选择器更改为 .workflow:hover + .dropdown
但是,当您使用同级选择器时,您将失去在下拉菜单上移动的能力,因为当鼠标离开 .workflow
时,菜单会再次隐藏起来。
因此,我建议您将 .workflow
类从 a
标签移到 li
标签以覆盖孩子。
您可以在下面找到工作示例。请注意,li
具有 position: relative
属性,而 .dropdown
具有 position: absolute; top: 100%;
属性。
* {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
justify-content: space-around;
background-color: #1a2456;
padding: 1em;
align-items: center;
margin: 10px;
}
h2 {
color: #ff8b68;
}
li {
list-style: none;
position: relative;
}
li a,
h2 a {
text-decoration: none;
color: #ff8b68;
}
.how {
margin-left: 31em;
}
li .dropdown {
display: none;
position: absolute;
top: 100%;
}
.workflow:hover .dropdown {
display: block;
background: grey;
}
<header>
<div class="navbar">
<h2> <a href="#">MONOGRAM</a> </h2>
<li><a href="#" class="how">HOW IT WORKS</a></li>
<li class="workflow"><a href="#">WORKFLOW</a>
<div class="dropdown">
<ul>`enter code here`
<li>PHOTO EDITING</li>
<li>VIDEO & FILMMAKING</li>
<li>MUSIC & AUDIO</li>
<li>VIRTUAL PRODUCTION</li>
</ul>
</div>
</li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#"><i class="gg-shopping-bag"></i></a></li>
</div>
</header>
答案 1 :(得分:0)
首先,您将 .dropdown ul
设置为 display: none
,但您没有将其设置回 .workflow:hover .dropdown
中的默认值,因为它针对的是 .dropdown
类而不是ul
元素。
要么将 .dropdown ul
更改为仅 .dropdown
,要么使悬停类似于 .workflow:hover .dropdown ul
。
现在是主要问题,......
在使用 Inspect Element 时,我注意到 .dropdown
类不是 .workflow
的子类,而是相邻元素。
要解决这个问题,您应该使用 +
选择器,它选择相邻的兄弟元素或第一个元素之后的直接元素。
您的代码现在应该是这样的:
.dropdown ul {
display: none;
}
.workflow:hover + .dropdown ul {
display: block;
}
此外,您可以在此处阅读更多 CSS 选择器:
答案 2 :(得分:0)
在 li 元素中使用工作流类它将起作用。喜欢:
<li class="workflow"><a href="#">WORKFLOW</a>
* {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
justify-content: space-around;
background-color: #1A2456;
padding: 1em;
align-items: center;
margin: 10px;
}
h2 {
color: #FF8B68 ;
}
li {
list-style: none;
}
li a, h2 a {
text-decoration: none;
color: #FF8B68;
}
.how {
margin-left: 31em;
}
.dropdown ul {
display: none;
}
.workflow:hover .dropdown ul {
display: unset;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<header>
<div class="navbar">
<h2> <a href="#">MONOGRAM</a> </h2>
<li><a href="#" class="how">HOW IT WORKS</a></li>
<li class="workflow"><a href="#">WORKFLOW</a>
<div class="dropdown">
<ul>
<li>PHOTO EDITING</li>
<li>VIDEO & FILMMAKING</li>
<li>MUSIC & AUDIO</li>
<li>VIRTUAL PRODUCTION</li>
</ul>
</div>
</li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#"><i class="gg-shopping-bag"></i></a></li>
</div>
</header>
</body>
</html>