当我尝试单击子菜单时，它消失了

Question

我有以下菜单

#cssmenu {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Ubuntu", sans-serif;
background: #14598e;
}
#cssmenu ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after, #cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 16px;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
background-color: #1d4f72;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content: "";
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content: "";
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 60px;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 20px 30px 35px 15px;
width: 260px;
font-size: 13px;
text-decoration: none;
color: #fff;
background: #14598e;
text-transform: uppercase;
}
#cssmenu ul li ul li:hover > a {
background-color: #1d4f72;
}

<div class="content">
<div id='cssmenu'>
<ul>
<li><a href='inicio.html'>Inicio</a></li>
<li class='active'><a href='#'>Soluciones</a>
<ul>
<li><a href='solucion1.html'>Solución 1</a></li>
<li><a href='solucion2.html'>Solución 2</a></li>
<li><a href='solucion3.html'>Solución 3</a></li>
</ul>
</li>
<li><a href='beneficios.html'>Beneficios</a></li>
<li><a href='cliente.html'>Clientes</a></li>
<li><a href='empleo.html'>Empleos</a></li>
<li><a href='#'>Blog</a></li>
</ul>
</div>
</div>

我遇到的问题是，当窗口大小正常时，子菜单显示正确，可以选择它拥有的任何选项。但是当我将窗口的大小减小几厘米时，会显示子菜单，但是当我尝试选择某个选项时，它会立即消失。 我已经查看了代码，但我没有看到该行为的原因，我希望并可以帮助我找到问题。提前非常感谢...

Answer 1

添加 z 索引将指定元素的可视堆叠方式。具有较大 z 索引的元素将具有更大的堆栈顺序，并且将始终堆叠在具有较低堆栈顺序的元素前面。

#cssmenu ul ul {
position: absolute;
z-index: 1;
left: -9999px;
}

块引用注释z-index 仅适用于定位元素(position:absolute、position:relative或position:fixed(

Answer 2

如果我很好地理解你，当你的菜单显示在两行上时，你就有问题了。 您可以添加：

#cssmenu ul ul {
z-index: 10;
}

这样，您的子菜单将位于菜单上方，您将能够单击项目。

#cssmenu {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Ubuntu", sans-serif;
background: #14598e;
}
#cssmenu ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after, #cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 16px;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
background-color: #1d4f72;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content: "";
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content: "";
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
z-index:10;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 60px;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 20px 30px 35px 15px;
width: 260px;
font-size: 13px;
text-decoration: none;
color: #fff;
background: #14598e;
text-transform: uppercase;
}
#cssmenu ul li ul li:hover> a {
background-color: #1d4f72;
}

<div class="content">
<div id='cssmenu'>
<ul><li><a href='inicio.html'>Inicio</a></li>
<li class='active'><a href='#'>Soluciones</a>
<ul><li><a href='solucion1.html'>Solución 1</a></li>
<li><a href='solucion2.html'>Solución 2</a></li>
<li><a href='solucion3.html'>Solución 3</a></li></ul></li>
<li><a href='beneficios.html'>Beneficios</a></li>
<li><a href='cliente.html'>Clientes</a></li>
<li><a href='empleo.html'>Empleos</a></li>
<li><a href='#'>Blog</a></li></ul></div></div>

Answer 3

当您:hover将该元素及其任何子元素放在菜单中其余链接上方时，您只需要在li上放置一个z-index: 1。

#cssmenu {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Ubuntu", sans-serif;
background: #14598e;
}
#cssmenu ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after, #cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 16px;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
#cssmenu > ul > li:hover {
z-index: 1;
}
#cssmenu > ul > li:hover > a {
background-color: #1d4f72;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content: "";
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content: "";
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 60px;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 20px 30px 35px 15px;
width: 260px;
font-size: 13px;
text-decoration: none;
color: #fff;
background: #14598e;
text-transform: uppercase;
}
#cssmenu ul li ul li:hover > a {
background-color: #1d4f72;
}

<div class="content">
<div id='cssmenu'>
<ul>
<li><a href='inicio.html'>Inicio</a></li>
<li class='active'><a href='#'>Soluciones</a>
<ul>
<li><a href='solucion1.html'>Solución 1</a></li>
<li><a href='solucion2.html'>Solución 2</a></li>
<li><a href='solucion3.html'>Solución 3</a></li>
</ul>
</li>
<li><a href='beneficios.html'>Beneficios</a></li>
<li><a href='cliente.html'>Clientes</a></li>
<li><a href='empleo.html'>Empleos</a></li>
<li><a href='#'>Blog</a></li>
</ul>
</div>
</div>