drop-down-menu - CSS下拉菜单溢出问题

Question

我有一个博客http://fraldasdamaria.blogspot.pt/我想将子菜单设置为翻转模式。我可以让子菜单正常工作；但是当我将条件溢出：隐藏在子菜单上时，子子菜单消失了。任何人都可以帮助我吗？

CSS代码是：

`#menuWrapper {
width:100%; /* Ancho del menú */
height:35px; /* Altura da barra principal */
padding-left:15px;
background:#1F151E; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menu li a:hover{background:#2580a2; color:#fff; /* Cor do Separador principal ao passar cursor */
transition: background 0.5s linear 0s;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#FFFFFF;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:none;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:10px 5px 10px 10px; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#1F151E; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px; /* Largura do submenu */
height:auto;
max-height:900px;
 z-index:100;
 font-size:12px; /* Tamanho fonte submenu */
 border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
 transition-property: max-height;
 transition: max-height 2s ease;

}
.menu li:hover ul.sub li {
display:block;
height:36px; /* Altura de cada linha do submenu */
position:relative;
float:left;
width:200px;
font-weight:9px;
}
.menu li:hover ul.sub li a{
display:block;
line-height:30px;
text-indent:5px;
color:#FFFFFF;
text-decoration:none;
padding:4px 0px 4px 8px; /* Margem interna de cada linha do submenu */
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#1F151E url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover, .menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
transition: background 0.5s linear 0s;
color:#FFFFFF;
border-radius: 0px 0px 20px 20px;
text-shadow: 3px 3px #1F151E;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:0px;
background: #1F151E; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px; /* Largura do subsubmenu */
z-index:4;
height:auto;
 max-height:900px;
 overflow:hidden;
 border-radius: 0px 0px 20px 20px; /* Bordes redondeados del subsubmenú */
 transition-property: max-height;
 transition: max-height 2s ease;
}

Answer 1

这是因为您的子菜单(#crosscol ul)已width:200px在鼠标悬停时定义，如果您申请overflow:hidden- 200px 之外的所有其他内容都应该被隐藏。

我还看到您正在使用非常旧的下拉菜单方法，使用 left:-9999px，只需一个 display:block/none 即可用于任何级别的嵌套下拉菜单。

编辑 这是一个使用 display:block/none 的示例下拉列表，非常简单。

http://jsfiddle.net/shekhardesigner/KhFzh/

Answer 2

它是如此简单，您只需要使您打开的子菜单具有溢出：可见属性

#menu ul:hover{
   overflow: visible;
}

<ul id="menu">
    <li> 
        <ul>
          <li> 
              <span>sub menu</span> 
          </li>
        </ul>
    </li>
</ul>