为什么我的一级菜单和二级菜单没有对齐

来源:2-1 实现菜单基本结构和样式

洛洛

2017-09-28 20:18

http://img1.mukewang.com/59cce85400019b3207980031.jpg

.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;

}


写回答 关注

2回答

  • 慕村9367697
    2019-04-05 22:31:19

    或者改成top:200px;这个值要根据第一级菜单的relative 定位的top值来定

  • MarlboroKay
    2017-09-29 00:25:42

    ul{

    padding: 15px 0;

    margin:9px;

    list-style:none;

    background:#6c6669;

    color:#ffffff;

    border-right-width: 10px;

    top:0;

    }

    top:0;去掉

    望采纳!

    Marlbo... 回复洛洛

    可以把完整的代码发出来,调试一下。或者,你可以自己手动F12看下

    2017-09-30 00:33:38

    共 2 条回复 >

JS实现京东无延迟菜单效果

JS模拟京东商城无延迟菜单效果,学习菜单结构和样式处理

57664 学习 · 138 问题

查看课程

相似问题