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

原创
2016-06-21 09:33:42679浏览

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

/* 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核实处理。