1

我有一个带有子菜单的垂直菜单。我希望子菜单显示在 2 列中。我现在可以在 1 列中显示子菜单。

谁能帮我？我在网上搜索了很多信息，很难找到有关此主题的垂直菜单。

这是我的CSS：

    #menuvertical { 
        text-align: left;
        width:180px;
        position: absolute;
        top:200px;
        left: 10px;
        /*opacity: .9;*/
        z-index: 1;
        border: 2px solid #ffc82b;
    }

#menuvertical_location {
    position: absolute;
    top:11px;
    left: 170px;
    }

#menuvertical ul {
    list-style-type: none;
    padding:0;
    }

#menuvertical ul li.nivel1 {
width: 180px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera { /*Líneas división celdas*/
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #e0d9aa;
}
#menuvertical ul li {
    padding:0;
    background-image: url(../images/flecha_categoria.png);
    background-repeat: no-repeat;
    background-position: right center;
}

#menuvertical ul li a {
    display: block;
    text-decoration: none;
    color: #9c503b; /* Color del texto */
    background-color: #fff3d6; /* Color de fondo */
    border: solid 0px #fee; /* Borde de las pestañas */
    border-top: none;
    padding: 10px; /*Ancho celda*/
    position: relative;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bolder;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
    background-color: #FFF; /* Color de fondo al pasar el mouse */
    color: #000;
    position: relative;
    list-style-type: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #d6d6e6;
    border-right-color: #d6d6e6;
    border-bottom-color: #d6d6e6;
    border-left-color: #d6d6e6;
    border-right-style: solid;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
    display: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #d6d6e6;
    border-right-color: #d6d6e6;
    border-bottom-color: #d6d6e6;
    border-left-color: #d6d6e6;
    border-right-style: solid;


}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
    display: block;
    position: absolute;
    left: 179px;
    top: -1px;
    /*border: 1px solid #d6d6e6;*/  
}

#menuvertical ul li ul li ul {
    float:left;
    width: 150px;

    }


#menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
    background-color: #FFF; /* Color de fondo subpestañas */
    color: #103856; /* Color del texto subpestañas */
    width: 300px;
    border: 0px solid #ffc82b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    /*-moz-column-width: 300px;
    -moz-column-count: 2;*/

}

#menuvertical ul li ul li a:hover {
    position: relative;
    /*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
    color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
    border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;

}

提前感谢您的帮助。

4

0 回答 0