Открыть подменю только после нажатия на родителя

Question

Я думаю, что моя проблема была отвечена много раз раньше, но я не могу найти точно мое дело.

У меня есть вертикальное меню с подменю, и я хочу показать подменю только в том случае, если родитель был нажат (не зависает), показывая только одно подменю за один раз и после щелчка где-нибудь из меню, я хочу, чтобы подменю исчезло ,

Это то, что у меня есть сейчас - оно основано на парящем сейчас. Я попытался изменить: hover на что-то вроде: active, но он не работает (я не очень хорошо разбираюсь в 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; 
      } 

У кого-нибудь есть идеи?

Answer 1

ОК, я использовал это, чтобы решить мою проблему: How do I detect a click outside an element?

Теперь у меня есть что-то подобное в сноске сайте:

 

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

И когда я нажал на подменю, я вызываю функцию подменю в подменю:

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

Answer 2

Насколько я знаю, вы не можете сделать это только с помощью CSS, и вам нужно будет использовать javascript/jQuery.