分享一个纯css制作的二级下拉导航菜单,仿的百度百科,效果基本一模一样。
HTML
首先在.nav-content-box放置多个一级菜单li,和对应的二级下拉菜单ul
<ul class="nav-content-box">
<li class="index on">
<span><a href="http://www.sucaihuo.com/">首页</a></span>
</li>
<li class="cat">
<span><a href="http://www.sucaihuo.com/js">分类</a></span>
<ul>
<li><a href="http://www.sucaihuo.com/js">自然</a></li>
<li><a href="http://www.sucaihuo.com/php">文化</a></li>
<li><a href="http://www.sucaihuo.com/js/450.html">地理</a></li>
<li><a href="http://www.sucaihuo.com/templates/292.html">历史</a></li>
<li><a href="http://www.sucaihuo.com/templates/293.html">生活</a></li>
<li><a href="http://www.sucaihuo.com/templates/290.html">社会</a></li>
<li><a href="http://www.sucaihuo.com/js/1.html">艺术</a></li>
</ul>
</li>
<li class="special ">
<span><a href="javascript:void(0)">特色百科</a></span>
<ul>
<li><a href="#/calendar/">历史上的今天</a></li>
<li><a href="#/museum/">数字博物馆</a></li>
</ul>
</li>
</ul>
定义下拉导航菜单背景层
.nav-bg{
position: absolute;
width: 100%;
height: 272px;
background: #24619c;
background:rgba(36,97,158,.95);
-webkit-transition: .3s;
transition: .3s;
z-index: 9999;
}
显示下拉菜单
.nav-bar:hover{
overflow: visible;
-webkit-transition:all 0.5s ease;
transition:all 0.5s ease;
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791