如何使下拉菜单粘

Question

我目前有一个水平菜单，下面是第二个水平下拉菜单栏，如下图所示。但是，只有鼠标悬停时，下面的辅助下拉菜单栏才会保留。有没有办法让这个辅助菜单栏变粘，以便在单击其中的选项之前保持可见？

JS Fiddle

   <li>
  <div><a href="link.html">link1</a>
  </div>
</li>
<li><a href="#">link2</a>
    <ul>
        <li><a href="link.html">bottom1</a>
        </li>
        <li><a href="link.html">bottom2</a>
        </li>
        <li><a href="link.html">bottom3</a>
        </li>
         <li><a href="link.html">bottom4</a>
        </li>
        <li><a href="link.html">bottom5</a></li>
        <li><a href="link.html">bottom6</a></li>
    </ul>
</li>
<li><a href="#">link8</a>
  <ul>
        <li><a href="link.html">bottom1</a>
    </li>
        <li><a href="link.html">bottom2</a>
        </li>
        <li><a href="link.html">bottom3</a>
        </li>
        <li><a href="link.html">bottom4</a>
        </li>
  </ul>
</li>

我的CSS

#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
font-weight:400;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 1101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 10px;
left: 50px;
vertical-align:middle;
}
#menu > li:hover > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
height: 30px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
color: #333;

}
#menu li a:hover {
color: #0263B5;
font-size: 18px;
vertical-align: middle;
font-family: 'Lato', "sans-serif; 700;";
}
#menu li ul li {display: inline-block;
float:none; }

@Woodrow Barley这是我直接从破碎的菜单中取出的CSS

#menu {
font-weight:400;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 1101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 10px;
left: 50px;
vertical-align: middle;
}
#menu > li.active > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
height: 30px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
color: #333;


}
#menu li a:hover {
color: #28B701;
font-size: 18px;
vertical-align: middle;
font-family: 'Lato', "sans-serif; 700;";
}
#menu li ul li {display: inline-block;
float:none; }

Answer 1

是的，@伍德罗巴洛是对的，你需要JS来做这件事。试试这个：http://jsfiddle.net/0sqL4cL7/1/

我添加了这个JQuery函数

$('#menu > li').hover(function() {
      $( this ).addClass( "active" ).siblings().removeClass("active");
});

并改变了你的

#menu > li:hover > ul {...}

是

#menu > li.active > ul {...}