我的网站上有一个下拉导航系统,它工作正常,但我注意到当我将鼠标悬停在下拉文本下方时,它仍然会显示下拉菜单。 ( jsfiddle of before ) 我想改变它,所以我尝试将 #dropdown:hover #dropdown-content
更改为 #dropdown p:hover #dropdown-content
。但我没有得到任何结果。
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown p:hover #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
我已经尝试了所有方法,从将 p
元素放入它自己的 div 到将 p
元素放入 ul
元素。任何帮助,将不胜感激。
最佳答案
你应该使用这个 CSS 选择器 #dropdown>p:hover ~ #dropdown-content
:
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown>p:hover ~ #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#dropdown:hover #dropdown-content {
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
关于html - 当悬停 p 元素时尝试显示 div 元素时,我的 CSS 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53992649/