3

我想我的问题以前已经回答过很多次了，但我找不到我的确切情况。

我有一个带有子菜单的垂直菜单，我只想在单击父级（而不是悬停）时显示子菜单，一次只显示一个子菜单，在单击菜单外的某个位置后，我希望子菜单消失。

这就是我现在所拥有的——它基于现在的悬停。我尝试将 a:hover 更改为 a:active 之类的东西，但效果不佳（我的 CSS 不太好）。

    /* 容器 */
     #cssmenu > ul {
        显示：块；
        位置：相对；
      //宽度：190px；
      宽度：100%；
     }

        /* 包含链接的列表元素 */
           #cssmenu > ul li {
              显示：块；
              位置：相对；
              边距：0；
              填充：0；
              宽度：100%；  
           }

            /* 通用链接样式 */
            #cssmenu > ul li a {
                显示：块；
                位置：相对；
                边距：2；
                宽度：95%；
                高度：50 像素；
                背景颜色：#ABC578;
                左边框：实心 0px #FFFFFF;
                边框底部：实心 1px #FFFFFF;
                字体：0.7em Tahoma，无衬线；
                字体大小：14px；
                字体粗细：粗体；
                颜色：#FFFFFF；
                文字装饰：无；
                填充顶部：30px；
            }


            /* 菜单/子菜单链接的悬停状态 */
            #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
                颜色：#fff;
                文本阴影：0 1px 0 rgba(0, 0, 0, .3);
                背景：#82c500；
                背景：-webkit-linear-gradient（底部，#82c500，#000000）；
                背景：-ms-linear-gradient（底部，#82c500，#000000）；
                背景：-moz-linear-gradient（底部，#82c500，#000000）；
                背景：-o-线性渐变（底部，#82c500，#000000）；
                边框颜色：透明；
            }

            /* 指示子菜单的箭头 */
            #cssmenu > ul .has-sub>a::after {
                内容： '';
                位置：绝对；
                顶部：34px；
                右：8px；
                宽度：0px；
                高度：0px；

                /* 使用边框创建箭头 */
                边框：4px纯透明；
                左边框：4px 实心#d8d8d8；
            }

            /* 相同的箭头，但颜色更深，以创建阴影效果 */
            #cssmenu > ul .has-sub>a::before {
                内容： '';
                位置：绝对；
                顶部：35px；
                右：8px；
                宽度：0px；
                高度：0px；

                /* 使用边框创建箭头 */
                边框：4px纯透明；
                左边框：4px 实心#000；
            }

            /* 改变鼠标悬停时的颜色 */
            #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
                左边框：4px 实心#fff；
            }

            #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
                左边框：4px 实心 rgba(0, 0, 0, .3);
            }


            /* 子菜单 */
            #cssmenu > ul ul {
                位置：绝对；
                左：95%；
                宽度：100%；
                顶部：-9999 像素；
                左填充：5px；
                不透明度：0；
                /* 使用不透明过渡创建的淡入淡出效果 */
                -webkit-transition：不透明度 .2s 缓入；
                -moz-transition：不透明度 .2s 缓入；
                -o-transition：不透明度 .2s 缓入；
                -ms-transition：不透明度 .2s 缓入；
            }

            /* 当用户悬停父链接时显示子菜单 */
            #cssmenu > ul li:hover>ul {
                顶部：-2px；
                不透明度：1；
            }

请问有人有什么想法吗？

4

2 回答 2

2

好的，我用它来解决我的问题：如何检测元素外的点击？

现在我在网站的页脚中有这样的东西：

     $('html').click(function() {
            隐藏子菜单（）；
     });
     $("#cssmenu").click(函数(事件){
            event.stopPropagation();
     });

当我点击子菜单时，我调用显示子菜单的 subMenu 函数：

    <div id='cssmenu'>
    <ul>
      <li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
    ...
于 2013-03-10T13:23:04.307 回答
0

据我所知，你不能单独使用 CSS 来做到这一点，你需要使用 javascript/jQuery。

于 2013-03-10T12:09:27.240 回答