CSS 单击后关闭下拉菜单
CSS close dropdown menu after click
我在css中创建了一个第一级和第二级的下拉菜单。
#horizzontalMenu {
width: 770px;
height: 570px;
border: 1px #000 solid;
margin: 20px auto;
padding: 15px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#horizzontalMenu,
#horizzontalMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#horizzontalMenu {
height: 41px;
padding-left: 5px;
padding-top: 5px;
position: relative;
z-index: 2;
}
#horizzontalMenu ul {
left: -9999px;
position: absolute;
top: 37px;
width: auto;
}
#horizzontalMenu ul ul {
left: -9999px;
position: absolute;
top: 0;
width: auto;
}
#horizzontalMenu li {
float: left;
margin-right: 5px;
position: relative;
}
#horizzontalMenu li a {
background: #c1c1bf;
color: #000;
display: block;
float: left;
font-size: 16px;
padding: 8px 10px;
text-decoration: none;
}
#horizzontalMenu > li > a {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
overflow: hidden;
}
#horizzontalMenu li a.fly {
background: #c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right: 15px;
}
#horizzontalMenu ul li {
margin: 0;
}
#horizzontalMenu ul li a {
width: 120px;
}
#horizzontalMenu ul li a.fly {
padding-right: 10px;
}
#horizzontalMenu li:hover > a {
background-color: #858180;
color: #fff;
}
#horizzontalMenu li a:focus {
outline-width: 0;
}
#horizzontalMenu li a:active + ul.dd,
#horizzontalMenu li a:focus + ul.dd,
#horizzontalMenu li ul.dd:hover {
left: 0;
}
#horizzontalMenu ul.dd li a:active + ul,
#horizzontalMenu ul.dd li a:focus + ul,
#horizzontalMenu ul.dd li ul:hover {
left: 140px;
}
<div>
<ul id="horizzontalMenu" />
<li class='Documenti'>
<a class="fly" href="#">Document</a>
<ul class="dd">
<li id="menu_documentiEmessi">
<a class="fly" href="#">Documenti emessi</a>
<ul>
<li id="menu_docFattOut"><a>Fatture</a>
</li>
<li id="menu_fatturaPA"><a>Fatture PA (beta)</a>
</li>
<li id="menu_preventivi"><a>Preventivi</a>
</li>
<li id="menu_ddt"><a>DDT</a>
</li>
<li id="menu_docProfOut" class='last-child'><a>Proforma</a>
</li>
</ul>
</li>
<li id="menu_documentiRicevuti">
<a class="fly" href="#">Documenti ricevuti</a>
<ul>
<li id="menu_docFattIn"><a>Fatture</a>
</li>
<li id="menu_docProfIn"><a>Proforma</a>
</li>
</ul>
</li>
<li id="menu_docGenerici"><a>Documenti generici</a>
</li>
<li id="menu_docTributi"><a>Tributi</a>
</li>
<li id="menu_primanota"><a>Prima nota</a>
</li>
<li class='separator'></li>
<li id="menu_crediti"><a>Crediti</a>
</li>
<li id="menu_debiti" class='last-child'><a>Debiti</a>
</li>
</ul>
</li>
</ul>
</div>
我想在鼠标单击后关闭第一级或第二级。可能吗?我只想在鼠标单击元素而不打开第二个级别的情况下关闭菜单li
。
你可以帮我吗?
卡 罗
您只能使用 CSS,但您必须将按钮更改为复选框并打开写为 :checked+ul 的菜单
<ul id="horizzontalMenu"/>
<li class='Documenti' >
<label class="fly" for="fly-checkbox">Document</label><input type="checkbox" id="fly-checkbox" />
<ul class="dd">
<li id="menu_documentiEmessi">
...
#horizzontalMenu li label.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding:8px 10px;
display:inline-block;
padding-right:15px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
}
#fly-checkbox {
display:none;
}
#fly-checkbox:checked+ul.dd,
#fly-checkbox:checked+ul.dd:hover {
left:0;
}
#fly-checkbox:checked+ul,
#fly-checkbox:checked+ul:hover {
left:140px;
}
http://jsfiddle.net/4ek2bdgz/6/
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- 单击图像后如何创建下拉菜单?[引导/角度]
- 悬停时展开垂直下拉菜单,而不是单击
- 单击下拉菜单时,将文本粘贴到输入框中
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- Javascript问题与下拉菜单上的单击事件有关
- 单击下拉菜单隐藏其他下拉菜单
- 如果在内部单击下拉菜单,则不应将其关闭
- 单击单选按钮时不会禁用下拉菜单
- 常见问题下拉列表 - 单击时文本颜色已更改
- 基础 6 站点 - 下拉列表:单击时窗格无法打开
- 填充文本输入时,下拉列表单击 PHP PDO
- 悬停下拉菜单:点击父链接转到父页面
- Jquery下拉菜单.单击时,子菜单将消失.因此,如何使子菜单在单击时保持不变
- Foundation 5下拉菜单-点击链接并悬停
- Javascript下拉菜单点击,(关闭其他,当一个打开)
- 触摸设备的jQuery下拉导航.单击另一个菜单项时不能隐藏菜单项
- JQuery移动复制选择的选项到其他下拉菜单点击
- 多个下拉菜单-单击不关闭
- 下拉菜单-单选按钮列表和Javascript方法问题