title: Open submenu only after click on parent
body: <p>I think my problem has been answered many times before, but I can't find exactly my case. </p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <pre>
  
      /* 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;
              }
  
  </pre>
  
  <p>Does anyone has some idea please?</p>