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

首页课程实战体系课手记专栏慕课教程

来源：4-2 侧边栏导航跟随案例

control8

2017-12-24 09:02:34

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

<!DOCTYPE html>

<html>

<head>

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

*{margin: 0;padding: 0;}

.ym{background: url(http://climg.mukewang.com/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>

写回答

3回答

好帮手慕糖

2017-12-24

已采纳

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

祝学习愉快~

hontrol8

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

h017-12-25

共2条回复

control8

提问者

2017-12-25

已经解决，感谢老师！

好帮手慕糖

2017-12-25

你好，一个二级列表的li对应的是2个三级列表，然后因为这两个三级同时相对于一个二级定位，且没有单独的描述位置，导致这两个是重合的，由于这里颜色一样不太好理解，建议：可以先不隐藏，即：先把隐藏注释掉，然后，改变其中的一个的颜色，你对应理解下，例：

祝学习愉快~

0 学习 · 36712 问题

查看课程

相似问题

侧边栏导航

回答 1

侧边导航栏为何三级栏目无法显示？

回答 1

侧边栏导航跟随案例

回答 1

4-2有3个疑惑

回答 4

4-2侧边导航案例

回答 1

打开慕课网App查看更多内容