I've been trying to find a solution to my specific issue but haven't come across one that fits exactly. I have a vertical menu with submenus, and my goal is to only display the submenu when the parent item is clicked (not hovered). Additionally, I want only one submenu to be visible at a time and for it to disappear when clicking somewhere outside of the menu. Currently, the menu is designed to work on hover, but changing it to active state has not been successful (I'm not too familiar with 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, 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, 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 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
top: -2px;
opacity: 1;
}
If anyone has any ideas, please share!