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 回答