侧边栏导航跟随案例

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

侧边栏导航跟随案例

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

慕雪1434180

2017-10-18 23:14:01

老师，不知道为什么我的代码运行出来无法显示二级栏目，实在找不出哪里出现了问题（还没有设置悬浮出现）。代码如下：

<!DOCTYPE html>

<html>

<head>

<title>position</title>

padding: 0;

margin: 0;

}

.page{

width: 100%;

height: 4043px;

background: url("mooc.png") center top no-repeat;

}

.nav{

width: 160px;

height: auto;

position: fixed;

left: 0;

top: 50%;

margin-top: -103px;

font-family: "Microsoft Yahei";

}

.nav-li{

width: 160px;

height: 40px;

text-align: center;

line-height: 40px;

border-bottom: 1px #fff solid;

background: #333;

color: #fff;

font-size: 16px;

}

.tit{

width: 160px;

height: 40px;

}

.nav-li ul{

width: 100%;

height: auto;

background: #fff;

}

.nav-li ul li{

width: 160px;

height: 40px;

border-bottom: 1px dashed #666;

color:#333;

text-align: center;

line-height: 40px;

}

</style>

</head>

<body>

<div class="tit">慕课网标题</div>

<ul>

<li>

二级栏目

</li>

</ul>

</div>

<div class="nav-li">慕课网标题</div>

</div>

</body>

</html>

写回答

1回答

怎么都被占用了呢

2017-10-19

因为每一条标题的总容器只有40px高，而一级标题的高度就占了40px，ul就没有空间展示了。将每个标题的总容器高度设为auto或直接不设即可

0 学习 · 36712 问题

查看课程

相似问题

侧边栏导航跟随案例

回答 1

4-2侧边导航案例

回答 1

侧边栏导航

回答 1

4-2 侧边栏导航跟随案例请老师检查

回答 1

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

回答 3

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