Open submenu only after click on parent

Question

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, 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;
}

Does anyone have some idea please?

maybe it would be useful: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — Andrew, Jan 10 '20 at 11:23

score 2 · Accepted Answer · edited Jan 20 '23 at 15:32

OK, I used this to solve my problem: How do I detect a click outside an element?

Now I have something like this in the footer of website:

 $('html').click(function() {
     hideSubMenu();
 });

 $("#cssmenu").click(function(event){
     event.stopPropagation();
 });

And when I clicked on submenu, I call subMenu function that shows submenu:

<div id='cssmenu'>
<ul>
    <li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
    ...

Open submenu only after click on parent

1 Answers1