洛洛
2017-09-28 20:18
.wrap{
position: :relative;
width:200px;
left:50px;
top:50px;
}
ul{
padding: 15px 0;
margin:9px;
list-style:none;
background:#6c6669;
color:#ffffff;
border-right-width: 10px;
top:0;
}
li{
display:block;
height:30px;
line-height: 30px;
padding-left: :12px;
cursor: pointer;
font-size: 14px;
position:relative;
}
/*添加一个类*/
li.active{
background: #999395;
}
li span:hover{
color:#c81623;
}
.none{
display: none;
}
#sub{
width:600px;
position:absolute;
border:1px solid #f7f7f7;
background:#f7f7f7;
box-shadow: 2px 0 5px rgba(0,0,0,.3) ;
left:200px;/*正好出现在一级菜单右侧*/
top:0;
box-sizing:border-box;
margin:0;
padding: 10px;
}
.sub_content a{
font-size:12px;
color:#666;
text-decoration: none;
}
.sub_conten dd a{
border-left:1px solid #e0e0e0;
padding:0 10px;
margin:4px 0;
}
.sub_content dl{
overflow: hidden;
}
.sub_content dt{
float:left;
width:70px;
font-weight: bold;
clear:left;
position:relative;
}
.sub_content dd{
float:left;
margin-left:5px;
border-top:1px solid #eee;
margin-bottom:5px;
}
.sub_content dt i{
width:4px;
height:14px;
font:400 9px/14px consolas;
position:absolute;
right:5px;
top:5px;
}
或者改成top:200px;这个值要根据第一级菜单的relative 定位的top值来定
ul{
padding: 15px 0;
margin:9px;
list-style:none;
background:#6c6669;
color:#ffffff;
border-right-width: 10px;
top:0;
}
top:0;去掉
望采纳!
JS实现京东无延迟菜单效果
57661 学习 · 138 问题
相似问题