一直觉得各种浏览器的一些二级菜单的小内容设计的特别到位，浏览整个网页不费事，然后各种小项目的具体内容还可以挨个展示，那么二级菜单的操作方法是什么呢？
这个是网页的原图，当我鼠标滑过移动开发这一栏，后边就出现了二级菜单。今天就给大家展示一下具体的操作方法。
给大家来一个版：
二级菜单.png
首先先把主菜单的样式做出来：
做一个盒子：
<div class="menu">
<ul>
<li>移动开发</li>
<li>前端开发 </li>
<li>后端开发</li>
<li>基础知识</li>
<li>云计算&大数据 </li>
<li>智能硬件&物联网</li>
<li>数据库 </li>
<li>认证考试 </li>
<li>企业 IT</li>
<li>这几&产品&测试</li>
</ul>
</div>
下图是css里的样式
.menu{
width: 210px;
height: 391px;
background:white;
border: 1px solid #eeeeee;
}
li{
list-style: none;
height: 38px;
line-height: 38px;
font-size: 15px;
border: 1px solid #eeeeee;
}
然后二级菜单在每个li后边做出来
<div class="menu">
<ul>
<li>移动开发
<div class="a1"></div>
<div class="submenu">
<p>移动开发</p>
<dl>
<dt>android IOS</dt>
<dd>移动开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移动开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移动开发</dd>
</dl>
</div>
</li>
<li>前端开发
<div class="a1"></div>
<div class="submenu">
<p>前端开发</p>
<dl>
<dt>android IOS</dt>
<dd>前端开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>前端开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>前端开发</dd>
</dl>
</div>
</li>
<li>后端开发
<div class="a1"></div>
<div class="submenu">
<p>后端开发</p>
<dl>
<dt>android IOS</dt>
<dd>后端开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>后端开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>后端开发</dd>
</dl>
</div>
</li>
<li>基础知识
<div class="a1"></div>
<div class="submenu">
<p>基础知识</p>
<dl>
<dt>android IOS</dt>
<dd>基础知识</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>基础知识</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>基础知识</dd>
</dl>
</div>
</li>
<li>云计算&大数据
<div class="a1"></div>
<div class="submenu">
<p>云计算</p>
<dl>
<dt>android IOS</dt>
<dd>云计算</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>云计算</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>云计算</dd>
</dl>
</div>
</li>
<li>智能硬件&物联网
<div class="a1"></div>
<div class="submenu">
<p>智能硬件</p>
<dl>
<dt>android IOS</dt>
<dd>智能硬件</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>智能硬件</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>智能硬件</dd>
</dl>
</div>
</li>
<li>数据库
<div class="a1"></div>
<div class="submenu">
<p>数据库</p>
<dl>
<dt>android IOS</dt>
<dd>数据库</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>数据库</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>数据库</dd>
</dl>
</div>
</li>
<li>认证考试
<div class="a1"></div>
<div class="submenu">
<p>认证考试</p>
<dl>
<dt>android IOS</dt>
<dd>认证考试</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>认证考试</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>认证考试</dd>
</dl>
</div>
</li>
<li>企业 IT
<div class="a1"></div>
<div class="submenu">
<p>企业</p>
<dl>
<dt>android IOS</dt>
<dd>企业</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>企业</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>企业</dd>
</dl>
</div>
</li>
<li>这几&产品&测试
<div class="a1"></div>
<div class="submenu">
<p>移动开发</p>
<dl>
<dt>android IOS</dt>
<dd>移动开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移动开发</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移动开发</dd>
</dl>
</div>
</li>
</ul>
</div>
加上样式：
.submenu{
width: 210px;
height: 391px;
background: white;
position: absolute;
top: 0px;
left: 210px;
display: none;
border: 1px solid #eeeeee;
}
最后一步加上定位（position），设好滑动显示（hover）：
注意二级菜单的绝对定位我已经在上边加上了
.menu ul{
position: relative;
}
li:hover .submenu{
display: block;
}
二级.jpg
二级1.jpg
小露身手，如有失误，恭候点评，感谢阅读！
