4-2侧边栏导航跟随案例我模拟做了一个，三级栏目的border-bottom属性的问题

4-2侧边栏导航跟随案例我模拟做了一个，三级栏目的border-bottom属性我设置完了，但是为什么这个边框没有在两个三级栏目中间出现呢？而是只出现在了最下边的三级栏目底边框上？

<!DOCTYPE html>

<html>

<head>

<title>position4-3练习</title>

*{margin: 0;padding: 0;}

.ym{background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) center top no-repeat;

width:100% ;height:4200px;position: relative;}

.nov{

width: 160px; height:auto;

background: black;

color: white;

position: fixed;

top: 50%;

left: 0;

cursor: pointer;

margin-top:-61.5px;

}

.ek{width: 160px;height: auto;

line-height: 40px;

border-bottom: 1px solid white;

text-align: center;

}

.li1{font-family: "微软雅黑";

font-size: 18px;

}

ul{width: 160px; height: auto;

background: green;

}

.li2{width: 160px;height: 40px;

line-height: 40px;

border-bottom:1px dashed white;

position: relative;

}

ul li{ display: none;

}

.ek:hover ul li{display:block;}

.li2 ul{

width: 160px; height: 40px;

}

.li3{width: 160px;height: 40px;

border: 1px solid blue;

top: 0;

left:160px;

}

.sf{width: 160px;height: auto;

top: 0;

margin-left:-160px;

left: -160px;

}

.li3{

width: 160px;height: 40px;

border-bottom:1px solid white;

/*这里设置完成后只出现在最下边的三级栏目地边框上，而两个三级栏目中间那条没有出现*/

background:blue;

position: absolute;

text-align: center;

}

</style>

<body>

<ul>

二级标题

</div>

</li>

二级标题

</div>

</li>

</ul>

</div>

<ul>

二级标题

</div>

</li>

二级标题

</div>

</li>

</ul>

</div>

<ul>

二级标题

</div>

</li>

二级标题

</div>

</li>

</ul>

</div>

</body>

</html>

control8 2017-12-24

源自：CSS定位（position） 4-2 侧边栏导航跟随案例

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2017-12-24 14:15:56

你好，这里有2个原因：1、样式中.li3元素设置了border: 1px solid blue;样式，把这个去掉都可以显示了。还有就是这个决定定位，这两个元素定的位置是相同的，可以f12查看下效果哦。

祝学习愉快~

收起回答

control8 提问者 #1

非常感谢！

2017-12-25 09:02:01
control8 提问者 #2

感谢老师的细心指导，但是您所说的“还有就是这个决定定位，这两个元素定的位置是相同的，可以f12查看下效果哦”这句话中的这两个元素是指哪两个？哪两个位置相同？

2017-12-25 09:04:21