我是CSS和HTML组合的新手。我正在尝试对下拉菜单使用以下代码。但是,当鼠标从下拉菜单移开时,它将关闭。我想在下拉菜单外部的onclick上将其关闭。谁能建议我使用CSS修复此问题?对我来说,JSFiddle代码位于以下位置Fiddle link。您的帮助将不胜感激。 HTML看起来像这样。
<div id="main">
<div class="wrapper">
<div class="content">
<content>
<div>
<ul>
<a href="#"><li>Lorem ipsum dolor</li></a>
<a href="#"><li>Consectetur adipisicing</li></a>
<a href="#"><li>Reprehenderit</li></a>
<a href="#"><li>Commodo consequat</li></a>
</ul>
</div>
</content>
</div>
<div class="parent">Drop Down Parent 1</div>
</div>
CSS看起来像这样
#main {
margin: 30px 0 50px 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#main .wrapper {
display: inline-block;
width: 180px;
margin: 0 10px 0 0;
height: 20px;
position: relative;
}
#main .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
line-height: 30px;
height: 30px;
border-radius: 5px;
background: #F9F9F9;
border: 1px solid #AAA;
border-bottom: 1px solid #777;
color: #282D31;
font-weight: bold;
z-index: 2;
position: relative;
-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
-webkit-transition-delay: .8s;
text-align: center;
}
#main .parent:hover, #main .content:hover ~ .parent {
background: #fff;
-webkit-transition-delay: 0s, 0s, 0s;
}
#main .content:hover ~ .parent {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
z-index: 2;
}
#main .content {
position: absolute;
top: 0;
display: active;
z-index: 2;
height: 0;
width: 180px;
padding-top: 30px;
-webkit-transition: height .5s ease;
-webkit-transition-delay: .4s;
border: 1px solid #777;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
#main .wrapper:active .content {
height: 123px;
z-index: 3;
-webkit-transition-delay: 0s;
}
#main .content div {
background: #fff;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#main .content:hover {
height: 123px;
z-index: 3;
-webkit-transition-delay: 0s;
}
我正在寻找类似的东西,并将新内容设置为content标签。我真正在看的是
1)点击下拉菜单。显示下拉菜单。
2)悬停在它上面时继续显示。当鼠标悬停在下拉菜单之外时,请继续显示它。
3)在下拉菜单之外的某个地方单击时,请关闭下拉菜单。
我知道我在使用悬停选择器,所以我的行为就是这样。但是我想隐瞒上面的行为,但我不知道该怎么做。
<div id="main">
<div class="wrapper">
<div class="content">
<content>
</content>
</div>
<div class="parent">Drop Down Parent 1</div>
最佳答案
您的HTML错误。如果看到,您已将<li>
包装在<a>
标记内。这是您的基本问题。还有其他问题。
更改现有的HTML:
<a><li>...</li></a>
以正确的形式:
<li><a>...</a></li>
然后单击起作用。
<a>
不能在其中包含<li>
。因此,点击不会发生。关于html - 关闭CSS下拉菜单onclick,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32526972/