HTML代码,包含js
<!DOCTYPE html>
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<title > Title</title >
<link rel ="stylesheet" href ="css/nav.css" >
<script src ="http://code.jquery.com/jquery-1.9.1.min.js" > </script >
</head >
<body >
<header class ="nav-header" >
<ul class ="nav" id ="nav" >
<li >
<a href ="javascript:void(0)" > 首页</a >
<ul class ="nav-list" >
<li > <a href ="javascript:void(0)" > 首页</a > </li >
<li > <a href ="javascript:void(0)" > 首页</a > </li >
<li > <a href ="javascript:void(0)" > 首页</a > </li >
</ul >
</li >
<li >
<a href ="javascript:void(0)" > 导航一</a >
<ul class ="nav-list" >
<li > <a href ="javascript:void(0)" > 导航一</a > </li >
<li > <a href ="javascript:void(0)" > 导航一</a > </li >
<li > <a href ="javascript:void(0)" > 导航一</a > </li >
</ul >
</li >
<li >
<a href ="javascript:void(0)" > 导航二</a >
<ul class ="nav-list" >
<li > <a href ="javascript:void(0)" > 导航二</a > </li >
<li > <a href ="javascript:void(0)" > 导航二</a > </li >
<li > <a href ="javascript:void(0)" > 导航二</a > </li >
</ul >
</li >
<li >
<a href ="javascript:void(0)" > 导航三</a >
<ul class ="nav-list" >
<li > <a href ="javascript:void(0)" > 导航三</a > </li >
<li > <a href ="javascript:void(0)" > 导航三</a > </li >
<li > <a href ="javascript:void(0)" > 导航三</a > </li >
</ul >
</li >
<li >
<a href ="javascript:void(0)" > 导航四</a >
<ul class ="nav-list" >
<li > <a href ="javascript:void(0)" > 导航四</a > </li >
<li > <a href ="javascript:void(0)" > 导航四</a > </li >
<li > <a href ="javascript:void(0)" > 导航四</a > </li >
</ul >
</li >
<li >
<a href ="javascript:void(0)" > 导航五</a >
<ul class ="nav-list" >
<li > <a href ="javascript:void(0)" > 导航五</a > </li >
<li > <a href ="javascript:void(0)" > 导航五</a > </li >
<li >
<a href ="javascript:void(0)" > 导航五</a >
</li >
</ul >
</li >
</ul >
</header >
<section >
<div class ="instruction" >
说明:练习一下导航怎么写,同时试着用less来写样式。
<br > 需要更多信息请查看:<a href ="http://blog.csdn.net/dongxingpeng" > http://blog.csdn.net/dongxingpeng</a >
</div >
</section >
<script !src ="" >
$(function () {
$("#nav li" ).each(function () {
$(this ).hover(function () {
$(this ).find(".nav-list" ).addClass("show-list" );
},function () {
$(this ).find(".nav-list" ).removeClass("show-list" );
})
})
})
</script >
</body >
</html >
less样式语言
@red :#000 ;
@white :#CA952D ;
@li-width : 200px ;
@fontSize: 20px ;
html ,body {
background : @red;
margin : 0 ;
padding : 0 ;
}
header {
width : 100 %;
height : 30 px;
color : @white;
.nav {
width : 1200 px;
margin : 0 auto;
height : 30 px;
text-align : center;
font-size : 16 px;
}
.nav li {
float : left;
width : @li-width;
list-style-type : none;
line-height : 30 px;
}
.nav li a ,.nav-list li a {
text-decoration : none;
color : @white;
}
.nav-list {
position : relative;
display : none;
left : -40 px;
z-index : 99 ;
width : 100 px;
background : #00ff00 ;
}
.show-list {
display : block;
}
}
.instruction {
position : fixed;
top :50 %;
left :30 %;
clear : both;
color : @white;
font-size : @fontSize;
a {
color : @white;
text-decoration : none;
}
}