Question

当我尝试转到大孩子链接时，当我转到父链接上的子菜单时，菜单会快速消失，并且不允许我多次点击大孩子链接。

如何才能保持打开状态，直到我点击子菜单链接或大子链接为止。

Codepen示例：http://codepen.io/riwakawebsitedesigns/pen/PwaemX

a.menu-link {
float: right;
display: block;
padding: 1em;
}

.menu, .menu > ul ul {
clear: both;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.js .menu, .js .menu > ul ul {
overflow: hidden;
max-height: 0;
background: rgba(0,0,0,0.1);
}

.menu.active, .js .menu > ul ul.active {
max-height: 55em;
}

.menu > ul {
border-top: 1px solid #808080;
}

.menu li a {
color: #000;
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
position: relative;
}

.menu li.has-subnav > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.25em 0.5em;
}

.menu li.has-subnav > a.active:after {
content: "-";
}

/* Start Mobile */

@media screen and (min-width: 48.25em) {
.pattern {
overflow: visible;
}

a.menu-link {
display: none;
}

.js .menu, .js .menu > ul ul {
max-height: none;
overflow: visible;
background: none;
}

.js .menu > ul ul {
background: #808080;
display: none;
}

.js .menu > ul li:hover > ul {
display: block;
}

.menu ul {
margin: 0 0 0 -0.25em;
border: 0;
}

.menu li a {
border: 0;
}

.menu li.has-subnav > a {
padding-right: 2em;
}

.menu li.has-subnav > a:after {
content: ">";
font-size: 1em;
padding: 0.8em 0.5em;
}

.menu .level-1 > li.has-subnav > a:after {
content: "▼";
}

.menu > ul li {
margin: 0 0.25em;
}

.menu > ul > li {
display: inline-block;
position: relative;
}

.menu > ul ul {
position: absolute;
top: 0;
left: 12em;
width: 12em;
}

.menu > ul ul li {
position: relative;
}
.menu > ul ul.level-2 {
top: 3em;
left: 0;
}

} 

/* End Mobile */

Answer 1

这种风格会导致问题，因为它会在级别之间产生差距：

.menu > ul li {
  margin: 0 0.25em;
}

将其更改为：

.menu > ul li {
  padding: 0 0.25em;
}

<强> Updated Codepen

Answer 2

您将left:12em用于.menu > ul ul。为此，第三个ul到目前为止。在示例下面使用最大11.5em到.menu > ul ul是......

.menu > ul ul{
     position: absolute;
     top: 0;
     left: 11.5em;
     width: 12em;
}

下拉菜单快速移动

2 个答案: