单击时菜单保持打开状态

Question

我有一个悬停时带有下拉语句的菜单，问题是当我移除鼠标时它再次隐藏，当我单击主菜单上的选项时，有人可以帮我保持子菜单打开吗？

它会在鼠标悬停时显示，但即​​使在我移除鼠标光标后我也需要它保持打开状态。

谢谢

            #cssmenu > ul {
              position: relative;
              z-index: 999;
              float: left;
              border-bottom:2px solid lightblue;
            }
            #cssmenu > ul li {
              float: left;
              min-height: 0px;
              line-height: 1.3em;
              vertical-align: middle;
              padding: 0px;
            }
            #cssmenu > ul li.hover,
            #cssmenu > ul li:hover {
              z-index: 599;
              cursor: default;
            }
            #cssmenu > ul ul {
              visibility: hidden;
              position: absolute;
              top: 100%;
              left: 0;
              z-index: 598;
            }
            #cssmenu > ul ul li {
              float: none;
            }

            #cssmenu > ul li:hover > ul {
              visibility: visible;
              border-bottom:2px solid lightblue;
              color: white;
            }

            #cssmenu {
              width: auto;
              background: black;
              font-size: 13px;
              color:white;
              top:0px;
            }
            #cssmenu > ul {
              padding: 0 1px;
              display: block;
              float: none;
              zoom: 1;
            }
            #cssmenu > ul:before {
              content: '';
              display: block;
            }
            #cssmenu > ul:after {
              content: '';
              display: table;
              clear: both;
            }

            #cssmenu ul ul {
              margin: 0 10px;
              padding: 0 10px;
              float: none;
              background: black;
              border-bottom:2px solid lightblue;
              border-left: 1px solid lightblue;
              border-right: 1px solid lightblue;
              border-top: none;
              right: 0;
              left: 0;
              visibility: hidden;




            <div id='cssmenu' style="opacity: 0.5;filter: alpha(opacity=50);align-top:0px;color:white;">
            <ul>
               <li class='activeM'><a class="inicio" href='#'><span>Home</span></a></li>
               <li class='activeM'><a class="competencias" href='#'><span>Competências</span></a>
                  <ul>
                     <li class='active'><a class="saude" href='#'><span>Saúde</span></a></li>
                     <li class='active'><a class="ecosocial" href='#'><span>Economia Social</span></a></li>
                     <li class='active'><a class="desnvsustent" href='#'><span>Desenvolvimento Sustentado</span></a></li>
                  </ul>
               </li>
               </div>

提前致谢。

Answer 1

最近的评论似乎更清楚地表明您正在寻找视觉褪色效果。你说得对。过渡将是一个不错的选择。

您需要使用不透明度和可见性。我在这里模拟了一个例子：http://jsbin.com/cesacu/1/edit?html,css,output

您可能想要使用transition timing function 或持续时间来获得您想要的效果。

Answer 2

编辑：感谢演示。当菜单都在一个级别上时，它似乎在较大的屏幕尺寸上有适当的行为。你是对的，当菜单在较小的屏幕上进入两个级别时就会出现问题。这是你遇到真正问题的情况吗？

I found this CodePen that shows one way to make a responsive two-level menu like this. 如果您需要纯 CSS 菜单，请尝试搜索“响应式纯 CSS 超级菜单”。那里似乎还有其他一些选择。

---

初步回答：

我确实认为您需要 Javascript，正如 Hakim 所说。一种选择是添加替换 :hover 伪类的类，然后使用 jQuery 调用将这些类添加到菜单中。

这个来自2009 CSS Tricks post 的示例，针对您的情况进行了调整：

$('#cssmenu > ul li:hover > ul').hover(
  function(){ 
    $(this).children().addClass('visible');
  }
)

看起来您还需要直接在$(this) 上为#cssmenu > ul li.hover 选择器添加一个类。然后，您将需要另一个命令，例如 $(your-selector).click(function(){ $(this).removeClass('visible')) 使其再次消失。

一般来说，希望子菜单即使在您离开时也保持打开状态似乎有点奇怪。除非有第三级菜单，否则就是这样。