三种⽅式实现⽹页⼆级菜单
jquery下载超大文件⽅法⼀：使⽤HTML和CSS实现
⾸先是Html代码，习惯上会将菜单放在⼀个div⾥，使⽤盒⼦模型，⽅便以后的操作和设置样式。⼆级菜单也就是在⼀级菜单中的li中再添加⼀个ul-li结构
<div class="test">
<ul>
<li>A</li>
<li>B</li>
<li>C
高中免费课程网站
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
</ul>
</div>
使⽤css代码设置样式
<style type="text/css">
.test ul{
list-style-type: none;
}
.test ul li{
float:left;
/*以下设置仅为⽅便查看效果*/
width:50px;
height:20px;
border:1px solid black;
text-align: center;
}
.test ul li ul{
display: none;
}
.test li:hover ul{
display:block;
}
</style>
解释三个重要的css代码：
1.写出⼀个ul-li菜单时，它会默认垂直排列，⽽我们需要的是⽔平的菜单栏，所以需要设置li的浮动：float：left
2.当⿏标悬浮在有⼆级菜单的⼀级菜单选项时，才会出现⼆级菜单，所以在⿏标不悬浮的情况下，需要把⼆级隐藏起
来display：none
3.最后，设置li :hover ul 这个意思是，当⿏标悬浮在li上时，li下的ul呈现状态，hover是悬浮的意思，在设置a标签样
式时应该会接触过
⽅法⼆：使⽤jQuery实现
要⽤到jQuery⾸先第⼀步就是引⼊jquery.js⽂件
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
在平时做⽹页项⽬时，最好是将css，html，js分开，在html页⾯中引⼊css和js⽂件，css⽂件引⼊放在head中，js放在body的最后，这是为了在加载⽹页时，先加载出它的样式，最后加载js动态。那么注意了，在这⾥如果你的js代码是放在body中，那么引⼊jquery⽂件必须放在js代码之前，浏览器编译html⽂件时，是从上⾃下编译的，如果jquery⽂件放在最后，那么在你的js代码⼜使⽤到了jquery的功能，后果可想⽽知，效果是出不来的。
下⾯两种⽅式都是可⾏的，第⼀种⼆级菜单出现的很直接，fade呢有⼀个渐⼊渐出的过程
200，300的都是时间，估计是以ms为单位，有待查验。
worktile
js代码：
<script type="text/javascript">
/* js 语句 $(function(){});*/
$(function(){
$(".test li").hover(
/*⽗亲（li）下⾯的ul*/
function() {
$(this).find("ul").show(200);
},function(){
$(this).find("ul").hide(300);
}
);
$(".test li").hover(
function(){
$(this).find("ul").fadeIn(300);
},function(){
$(this).find("ul").fadeOut(300);
}
);
});
</script>
⽅法三：使⽤Bootstrap实现
如果不了解Bootstrap是什么，出门百度咨询⼀下
和jquery类似的，需要引⼊三个⽂件：
1. bootstrap.min.css
2.  jquery-
3.1.0.min.js  3. bootstrap.min.js
因为bootstrap所有js代码都是需要jquery做⽀撑的，所以只要引⼊bootstrap.js都必须引⼊jquery
opacity是什么意思英语
其实博主前⾯都偷了个懒，没有给每个li添加a标签，在实际操作中这是⾮常必要的，除⾮你要做⼀个不实现跳转功能的摆设菜单，那就随便怎么玩了。使⽤Bootstrap框架就必须使⽤a标签了，因为它的很多样式是设置在a标签上的，不使⽤没有效果，相⽐前⾯的两种来说，使⽤框架⼜省⼒⼜省⼼，⾮常简单。
只需三步：
1.为⼀级菜单的ul添加class-nav nav-pills（或者nav-tabs 等等）
2.为⼀级菜单中有下拉⼆级菜单的li添加 class-dropdown
为a标签添加属性：data-toggle="dropdown" 以及class-dropdown-toggle
3.给2步骤中li下的ul添加class-dropdown-menu
实例：
<ul class="nav nav-pills">
<li>
<a href="#">A</a>
</li>
<li class="dropdown">
<!-- span标签是添加⼀个下三⾓的图标 -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">B<span class="caret"></span></a>
易语言游戏源码网
<ul class="dropdown-menu">
<li><a href="#">B1</a></li>
<li><a href="#">B2</a></li>
<li><a href="#">B3</a></li>
<li><a href="#">B4</a></li>
</ul>
</li>
<li><a href="#">C</a></li>
</ul>
>腾讯24小时人工服务

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。