I think my problem has been answered many times before, but I can't find exactly my case.
I have a vertical menu with submenus and I want to show the submenu only if the parent was clicked (not hovered), showing only one submenu at a time and after click somewhere out the menu, I want the submenu to disappear.
This is what I've got now - it is based on hovering now. I tried to change a:hover to something like a:active, but it doesn't work well (I am not very good in 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; }
Does anyone has some idea please?