前端下拉菜单的实现
(1)纯HTML、CSS实现,当然也可以通过jQuery和js代码控制下拉菜单的显示和隐藏
<!--CSS实现下拉菜单-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现下拉菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#menu {
position: relative;
background-color: #000;
width: 100%;
height: 55px;
}
.logo {
color: #57d4ce;
display: inline-block;
line-height: 55px;
position: absolute;
padding: 0 40px;
}
ul {
list-style: none;
display: inline-block;
padding-left: 136px;
}
ul li {
line-height: 55px;
text-align: center;
position: relative;
float: left;
}
a {
text-decoration: none;
color: #fff;
display: block;
padding: 0 20px;
white-space: nowrap;
}
a:hover {
color: #FFF;
background-color: #ccc;
}
ul li ul li {
float: none;
margin-top: 2px;
background-color: #000;
}
ul li ul li a:hover {
color: #FFF;
background-color: #ccc;
}
ul li ul {
position: absolute;
left: 0;
top: 55px;
display: none;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="menu">
<div class="logo">
MiJiang
</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">华中科技大学</a></li>
<li><a href="#">中南大学</a></li>
<li><a href="#">湖南大学</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.top-nav
{
font-size: 12px;
font-weight: bold;
list-style: none;
border-bottom: 8px solid #DC4E1B;
overflow: auto;
}
.top-nav li
{
float: left;
margin-right: 1px;
}
.top-nav li a
{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
/*设置正常状态英文菜单隐藏*/
.top-nav li a span{
display:none;
}
/*鼠标移动到链接上面时将英文菜单显示*/
.top-nav li a:hover span{
display:block;
}
/*鼠标移动到链接上面时将中文菜单位置上移*/
.top-nav li a:hover{
margin-top:-20px;
}
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="#">首页<span>Home</span></a></li>
<li><a href="#">课程大厅<span>Course</span></a></li>
<li><a href="#">学习中心<span>Learn</span></a></li>
<li><a href="#">关于我们<span>About</span></a></li>
</ul>
</body>
</html>
(3)js和jQuery解决IE6不兼容hover事件问题(只是示范思路)
<!--js解决IE6不兼容hover事件--> <script type="text/javascript"> window.onload = function () { var isIE = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; if(isIE6){ var Lis = document.getElementsByTagName("li"); for(var i=0;i<Lis.length;i++){ Lis[i].onmouseover = function () { var u = this.getElementsByTagName("ul")[0]; if(u != undefined){ u.style.display = "block"; } }; Lis[i].onmouseout = function () { var u = this.getElementsByTagName("ul")[0]; if(u != undefined){ u.style.display = "none"; } }; } } } </script> <!--jQuery解决IE6不兼容hover事件,下面举例的版本较低,只是示范下思路--> <script type="text/javascript"> $(function () { if($.browser.msie && $.browser.version.substr(0,1)<7){ $("li").has("ul").mouseover(function () { $(this).children("ul").css("display","block"); }); $("li").has("ul").mouseout(function () { $(this).children("ul").css("display","none"); }); } }); </script>
362

被折叠的 条评论
为什么被折叠?



