>웹 프론트엔드 >HTML 튜토리얼 >怎么修改css代码 使下拉菜单中的线不长于本来的 效果要好点的_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-21 09:33:421139검색

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

/* 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
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.