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

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

WBOY
Freigeben: 2016-06-21 09:33:42
Original
1138 Leute haben es durchsucht

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

/* 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
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage