Maison > interface Web > tutoriel HTML > 怎么修改css代码 使下拉菜单中的线不长于本来的 效果要好点的_html/css_WEB-ITnose

怎么修改css代码 使下拉菜单中的线不长于本来的 效果要好点的_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:33:42
original
1137 Les gens l'ont consulté

下拉导航代码  使下拉导航里的横线去点或者 和效果一样大小

/* MENU */

#main-menu-1
{
    float: left;
    margin: 0 0 0 -30px;
    padding: 0px;
    font-weight: bold;
}

.usoft-menu-dropdown,.usoft-menu-dropdown ul
{
    font-size: 14px;
    list-style:none;
    z-index:9999;
}

/* 
LEVEL ONE
*/
.usoft-menu-dropdown
{
    position: relative;

}
.usoft-menu-dropdown li

    font-size:100%;
    float: left;
    zoom: 1;
    background: transparent;
}
.usoft-menu-dropdown a:hover
{
    color: #fff;
}
.usoft-menu-dropdown a:active
{
    color: #fff;
}
.usoft-menu-dropdown li a
{
    display: block;
    padding: 10px 12px;
    color: #fff;
    z-index:9999;
}
.usoft-menu-dropdown li:last-child a
{
    border-right: none;
}
/* Doesn't work in IE */
.usoft-menu-dropdown li.hover, .usoft-menu-dropdown li:hover
{
    color: #dee;
    position: relative;
}
.usoft-menu-dropdown li.hover a

    color: #dee;
    background:  #4484C1;

}

.usoft-menu-dropdown li a:hover
{

    background: #70A8DB;
    color: #fff;
}

/* 
LEVEL TWO
*/
.usoft-menu-dropdown ul
{
    width: 115px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
}
.usoft-menu-dropdown ul li
{
    font-size:96%;
    background:  #4484C1;
    color: #dee;
    float: none; 
    _float:left;
   
    
}

/* IE 6 & 7 Needs Inline Block */
.usoft-menu-dropdown ul li a
{
    width: 100%;
    display: inline-block;
    border-top:1px solid #ccc;  

}

/* 
LEVEL THREE
*/
.usoft-menu-dropdown ul ul
{  text-decoration:none;
    left: 100%;
    top: 0;
}
.usoft-menu-dropdown li:hover > ul
{
    visibility: visible;
}


回复讨论(解决方案)

自己在下面再画一条



把父标签设置成 position:relative
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal