您现在的位置是：首页 > 前端学习 > Web前端Web前端

下拉导航(图文)

第十三双眼睛2019-06-29【Web前端】人已围观

简介自己学习前端时，靠自己写出来的第一个下拉导航，记录一下。

这段时间，自己一直在学习前端的知识，看到好多网页上都有下拉导航，自己也试着做了一个，做出来了，记录一下。
首先写好html代码：
<nav class="nav">
<div class="navson">
<ul class="first">
<li class="level1">
<a href="#">网站首页</a>
</li>
<li class="level1">
<a href="http://www.baidu.com">项目分享</a>
<ul class="level2">
<li><a href="http://www.sohu.com">项目分享1</a></li>
<li>项目分享2</li>
<li>项目分享3</li>
</ul>
</li>
<li class="level1">
<a href="http://www.51zxw.net">视频专区</a>
<ul class="level2">
<li>视频专区1</li>
<li>视频专区2</li>
<li>视频专区3</li>
</ul>
</li>
<li class="level1">
<a href="#">资料下载</a>
<ul class="level2">
<li>资料下载1</li>
<li>资料下载2</li>
<li>资料下载3</li>
</ul>
</li>
<li class="level1">
<a href="#">学员反馈</a>
<ul class="level2">
<li>学员反馈1</li>
<li>学员反馈2</li>
<li>学员反馈3</li>
</ul>
</li>
<li class="level1">
<a href="#">网站公告</a>
<ul class="level2">
<li>网站公告1</li>
<li>网站公告2</li>
<li>网站公告3</li>
</ul>
</li>
<li class="level1">
<a href="#">用户登录</a>
<ul class="level2">
<li>用户登录1</li>
<li>用户登录2</li>
<li>用户登录3</li>
</ul>
</li>
</ul>
</div>
</nav>
，然后写好css，文件名index.css
@CHARSET "UTF-8";
*{
   margin: 0;
   padding: 0;
}
body{
   background-color: #ccc;
}
.nav{
   height:40px;
   margin: 0 auto;
   background-color: red;
   display: block;
}
.navson{
   width: 1080px;
   margin: 0 auto;
}
.first{
   margin: 0 auto;
   display: inline-block;
}
ul,li{
   list-style-type: none;
}
a{
   text-decoration: none;
}
.level1{
   display: inline-block;
   width:120px;
   font-size: 20px;
   line-height: 40px;
   padding: 0 10px;
   text-align: center;
}
.level1>a{
   color:#fff;
}
.level2>li{
   cursor: pointer;
   background-color: red;
}
.level2>li{
   color:color:#fff;
}
.first>.level1{
   float: left;
}
.level1>.level2{
   display: none
}
.level1:hover .level2{
   display: block;
}
这样，就成了。下面时效果图