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，哈基姆说。一种选择是添加替换: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'))，以使其再次消失。

更一般地说，即使你离开它，想要一个子菜单保持开放似乎有点奇怪。除非有第三级菜单，否则就是。

菜单在点击时保持打开状态

2 个答案: