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, .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?

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 May 23 '17 at 11:46

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')">
    ...

score 0 · Answer 2 · answered Mar 10 '13 at 12:09

0

As far as I know, you can't do this with CSS alone and you'll need to use javascript/jQuery.

answered Mar 10 '13 at 12:09

Vivienne

590
1
3
12

Open submenu only after click on parent

2 Answers2