只有在点击父母后才打开子菜单

Question

我认为我的问题已经被回答了很多次，但我找不到我的情况。

我有一个子菜单的垂直菜单，我只想显示子菜单，如果父母被点击（没有徘徊），一次只显示一个子菜单，并且在点击菜单后点击某处，我想让子菜单消失。

这就是我现在得到的 - 它是基于现在盘旋。我试图改变：悬停到类似于：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

OK，我用这个来解决我的问题：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。