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

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

WBOY
Release: 2016-06-21 09:33:42
Original
1138 people have browsed it

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

/* 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
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template