|
以目前所学，不借用js实现二级隐藏效果 先上HTML部分 搭房子必须先搭好框架 <nav>
<ul class="level">
<li><a href="">首页</a></li>
<li>
<a href="">一级菜单1</a>
<ul class="leveltwo">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>
<a href="">一级菜单2</a>
<ul class="leveltwo">
<li>二级菜单4</li>
<li>二级菜单5</li>
<li>二级菜单6</li>
</ul>
</li>
<li>
<a href="">一级菜单3</a>
<ul class="leveltwo">
<li>二级菜单7</li>
<li>二级菜单8</li>
<li>二级菜单9</li>
</ul>
</li>
<li>
<a href="">一级菜单4</a>
<ul class="leveltwo">
<li>二级菜单10</li>
<li>二级菜单11</li>
<li>二级菜单12</li>
</ul>
</li>
<li>
<a href="">一级菜单5</a>
<ul class="leveltwo">
<li>二级菜单13</li>
<li>二级菜单14</li>
<li>二级菜单15</li>
</ul>
</li>
</ul>
</nav>
效果如下图，现在只有框架，接下来我们需要对HTML添加css样式，给房子进行简装修。
以下为CSS样式代码 <style>
* {
padding: 0;
margin: 0;
}
/* 先重置一下html，消除HTML标签默认的内外边距 */
.wrap {
width: 800px;
margin: 0 auto;
}
/* 对导航的内容设置一个主体为800px的宽并使其居中 */
.clear {
clear: both;
}
/* 清除浮动 */
a {
text-decoration-line: none;
}
/* 去掉默认a标签的下划线 */
ul,
li {
list-style: none;
}
nav .level li {
float: left;
width: 100px;
text-align: center;
background: deeppink;
padding: 10px 0;
font-size: 16px;
color: lightpink;
}
nav .level li a {
color: pink;
}
nav .level li:hover {
background: purple;
}
/* 设置鼠标滑过后的样式 */
nav .leveltwo {
display: none;
}
/* 先使二级菜单的内容隐藏 */
nav .level li:hover .leveltwo {
display: block;
}
/* 鼠标滑过一级菜单后的显示二级菜单 */
</style>
添加CSS后效果如下图所示
pink老师说过，紫色和粉色♂更♂配♂哦♂gay里gay气的
| 
收藏
淘帖
踩
