我认为我的问题以前已经被多次回答,但我找不到我的情况 .
我有一个带子菜单的垂直菜单,我想只显示父菜单被点击(没有悬停),一次只显示一个子菜单,然后点击菜单后的某个地方,我想要显示子菜单,我希望子菜单消失 .
这就是我现在所拥有的 - 它现在基于徘徊 . 我试图改变一个:悬停到类似:活动的东西,但它不能很好地工作(我在CSS中不是很好) .
/* The container */
#cssmenu > ul {
display: block;
position: relative;
//width: 190px;
width:100%;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
display: block;
position: relative;
margin: 2;
width:95%;
height:50px;
background-color:#ABC578;
border-left:solid 0px #FFFFFF;
border-bottom:solid 1px #FFFFFF;
font: 0.7em Tahoma, sans-serif;
font-size: 14px;
font-weight:bold;
color: #FFFFFF;
text-decoration:none;
padding-top:30px;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background: #82c500;
background: -webkit-linear-gradient(bottom, #82c500, #000000);
background: -ms-linear-gradient(bottom, #82c500, #000000);
background: -moz-linear-gradient(bottom, #82c500, #000000);
background: -o-linear-gradient(bottom, #82c500, #000000);
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub>a::after {
content: '';
position: absolute;
top: 34px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub>a::before {
content: '';
position: absolute;
top: 35px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
border-left: 4px solid #fff;
}
#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
border-left: 4px solid rgba(0, 0, 0, .3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left:95%;
width:100%;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover>ul {
top: -2px;
opacity: 1;
}
有人有想法吗?
2 回答
据我所知,你不能单独使用CSS,你需要使用javascript / jQuery .
好的,我用它来解决我的问题:How do I detect a click outside an element?
现在我在网站的页脚中有这样的东西:
当我点击子菜单时,我调用subMenu函数显示子菜单: