导航条练习
练习安排:
1.先按照所给4案例的效果,在不看其源码的基础上还原出来(可使用文件夹提供的图片源)
案例1:
案例2:
案例3:
案例4:
完成结果推荐代码为:
案例1:
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css" media="screen"> 7 /* Simple scalable breadcrumb by Veerle Pieters 8 ------------------------------------------------------------------*/ 9 body { 10 font:71%/165% "Lucida Grande", Lucida, Verdana, sans-serif; 11 } 12 ul, li { 13 list-style-type:none; 14 padding:0; 15 margin:0; 16 } 17 #crumbs { 18 height:2.3em; 19 border:1px solid #dedede; 20 } 21 #crumbs li { 22 float:left; 23 line-height:2.3em; 24 color:#777; 25 padding-left:.75em; 26 } 27 #crumbs li a { 28 background:url(crumbs.jpg) no-repeat right center; 29 display:block; 30 padding:0 15px 0 0; 31 } 32 #crumbs li a:link, 33 #crumbs li a:visited { 34 color:#777; 35 text-decoration:none; 36 } 37 a:link, a:visited, 38 #crumbs li a:hover, 39 #crumbs li a:focus { 40 color:#dd2c0d; 41 } 42 </style> 43 </head> 44 <body> 45 <ul id="crumbs"> 46 <li><a href="#">Home</a></li> 47 <li><a href="#">Main section</a></li> 48 <li><a href="#">Sub section</a></li> 49 <li><a href="#">Sub sub section</a></li> 50 <li>The page you are on right now</li> 51 </ul> 52 </body> 53 </html>
其中图片:crumbs.jpg
案例2:
index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="menu_style.css" type="text/css" /> 8 </head> 9 <body> 10 <br> 11 <br> 12 <div class="menu"> 13 <ul> 14 <li><a href="#" >Home</a></li> 15 <li><a href="#" id="current">Products</a> 16 <ul> 17 <li><a href="#">Drop Down CSS Menus</a></li> 18 <li><a href="#">Horizontal CSS Menus</a></li> 19 <li><a href="#">Vertical CSS Menus</a></li> 20 <li><a href="#">Dreamweaver Menus</a></li> 21 </ul> 22 </li> 23 <li><a href="/faq.php">FAQ</a> 24 <ul> 25 <li><a href="#">Drop Down CSS Menus</a></li> 26 <li><a href="#">Horizontal CSS Menus</a></li> 27 <li><a href="#">Vertical CSS Menus</a></li> 28 <li><a href="#">Dreamweaver Menus</a></li> 29 </ul> 30 </li> 31 <li><a href="/contact/contact.php">Contact</a></li> 32 </ul> 33 </div> 34 35 </body> 36 </html>
其中图片有:
hover.gif:
hover_sub.gif:
seperator.gif:
sub_sep.gif:
menu_style.css
1 .menu{ 2 border:none; 3 border:0px; 4 margin:0px; 5 padding:0px; 6 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 7 font-size:14px; 8 font-weight:bold; 9 } 10 .menu ul{ 11 background:#333333; 12 height:35px; 13 list-style:none; 14 margin:0; 15 padding:0; 16 } 17 .menu li{ 18 float:left; 19 padding:0px; 20 } 21 .menu li a{ 22 background:#333333 url("images/seperator.gif") bottom right no-repeat; 23 color:#cccccc; 24 display:block; 25 font-weight:normal; 26 line-height:35px; 27 margin:0px; 28 padding:0px 25px; 29 text-align:center; 30 text-decoration:none; 31 } 32 .menu li a:hover, .menu ul li:hover a{ 33 background: #2580a2 url("images/hover.gif") bottom center no-repeat; 34 color:#FFFFFF; 35 text-decoration:none; 36 } 37 .menu li ul{ 38 background:#333333; 39 display:none; 40 height:auto; 41 padding:0px; 42 margin:0px; 43 border:0px; 44 position:absolute; 45 width:225px; 46 z-index:200; 47 /*top:1em; 48 /*left:0;*/ 49 } 50 .menu li:hover ul{ 51 display:block; 52 53 } 54 .menu li li { 55 background:url('images/sub_sep.gif') bottom left no-repeat; 56 display:block; 57 float:none; 58 margin:0px; 59 padding:0px; 60 width:225px; 61 } 62 .menu li:hover li a{ 63 background:none; 64 65 } 66 .menu li ul a{ 67 display:block; 68 height:35px; 69 font-size:12px; 70 font-style:normal; 71 margin:0px; 72 padding:0px 10px 0px 15px; 73 text-align:left; 74 } 75 .menu li ul a:hover, .menu li ul li:hover a{ 76 background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 77 border:0px; 78 color:#ffffff; 79 text-decoration:none; 80 } 81 .menu p{ 82 clear:left; 83 }
案例3:
index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <title>Massive Blue ~ CSS Vertical Menu</title> 5 <style type="text/css"> 6 @import url(menu_style.css); 7 </style> 8 </head> 9 <body> 10 11 <ul id="menu"> 12 <li><a href="#" title="Home">Home</a></li> 13 <li><a href="#" title="Products">Products</a></li> 14 <li><a href="#" title="Services">Services</a></li> 15 <li><a href="#" title="Support">Support</a></li> 16 <li><a href="#" title="FAQ">FAQ</a></li> 17 </ul> 18 19 </body> 20 </html>
其中图片有:
hover.gif:
seperator.gif:
menu_style.css
1 #menu { 2 background: #333; 3 float: left; 4 list-style: none; 5 margin: 0; 6 padding: 0; 7 width: 12em; 8 } 9 #menu li { 10 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 11 margin: 0; 12 padding: 0; 13 } 14 #menu a { 15 background: #333; 16 border-bottom: 1px solid #393939; 17 color: #ccc; 18 display: block; 19 margin: 0; 20 padding: 8px 12px; 21 text-decoration: none; 22 } 23 #menu a:hover { 24 background: #2580a2 url("images/hover.gif") left center no-repeat; 25 color: #fff; 26 padding-bottom: 8px; 27 }
案例4:
使用css2.0:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS Menu</title> 6 <style type="text/css"> 7 body { 8 padding: 50px; 9 } 10 /* The CSS Code for the menu starts here */ 11 #menu { 12 font-family: Arial, sans-serif; 13 font-weight: bold; 14 text-transform: uppercase; 15 margin: 50px 0; 16 padding: 0; 17 list-style-type: none; 18 background-color: #eee; 19 font-size: 13px; 20 height: 40px; 21 border-top: 2px solid #eee; 22 border-bottom: 2px solid #ccc; 23 } 24 #menu li { 25 float: left; 26 margin: 0; 27 } 28 #menu li a { 29 text-decoration: none; 30 display: block; 31 padding: 0 20px; 32 line-height: 40px; 33 color: #666; 34 } 35 #menu li a:hover, #menu li.active a { 36 background-color: #f5f5f5; 37 border-bottom: 2px solid #DDD; 38 color: #999; 39 } 40 #menu_wrapper ul {margin-left: 12px;} 41 #menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;} 42 #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;} 43 44 /* Black Menu */ 45 #menu_wrapper.black ul { 46 border-top: 2px solid #333; 47 border-bottom: 2px solid #000; 48 background: #333;} 49 #menu_wrapper.black a {color: #CCC;} 50 #menu_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;} 51 #menu_wrapper.black {background: url(images/black.png) no-repeat right;} 52 #menu_wrapper.black div {background: url(images/black.png) no-repeat left;} 53 54 /* Blue Menu */ 55 #menu_wrapper.blue ul { 56 border-top: 2px solid #356AA0; 57 border-bottom: 2px solid #204061; 58 background: #356AA0;} 59 #menu_wrapper.blue a {color: #fff;} 60 #menu_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;} 61 #menu_wrapper.blue {background: url(images/blue.png) no-repeat right;} 62 #menu_wrapper.blue div {background: url(images/blue.png) no-repeat left;} 63 64 /* Red Menu */ 65 #menu_wrapper.red ul { 66 border-top: 2px solid #660000; 67 border-bottom: 2px solid #450000; 68 background: #660000;} 69 #menu_wrapper.red a {color: #fff;} 70 #menu_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;} 71 #menu_wrapper.red {background: url(images/red.png) no-repeat right;} 72 #menu_wrapper.red div {background: url(images/red.png) no-repeat left;} 73 74 /* Orange Menu */ 75 #menu_wrapper.orange ul { 76 border-top: 2px solid #d15600; 77 border-bottom: 2px solid #B44500; 78 background: #d15600;} 79 #menu_wrapper.orange a {color: #fff;} 80 #menu_wrapper.orange li a:hover, #menu_wrapper.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;} 81 #menu_wrapper.orange {background: url(images/orange.png) no-repeat right;} 82 #menu_wrapper.orange div {background: url(images/orange.png) no-repeat left;} 83 </style> 84 </head> 85 <body> 86 <!-- Grey Menu --> 87 <div id="menu_wrapper" class="grey"> 88 <div class="left"></div> 89 <ul id="menu"> 90 <li><a href="#">Home</a></li> 91 <li class="active"><a href="#">About</a></li> 92 <li><a href="#">Services</a></li> 93 <li><a href="#">Products</a></li> 94 <li><a href="#">Contact</a></li> 95 </ul> 96 </div> 97 98 <!-- Black Menu --> 99 <div id="menu_wrapper" class="black"> 100 <div class="left"></div> 101 <ul id="menu"> 102 <li><a href="#">Home</a></li> 103 <li class="active"><a href="#">About</a></li> 104 <li><a href="#">Services</a></li> 105 <li><a href="#">Products</a></li> 106 <li><a href="#">Contact</a></li> 107 </ul> 108 </div> 109 110 <!-- Blue Menu --> 111 <div id="menu_wrapper" class="blue"> 112 <div class="left"></div> 113 <ul id="menu"> 114 <li><a href="#">Home</a></li> 115 <li class="active"><a href="#">About</a></li> 116 <li><a href="#">Services</a></li> 117 <li><a href="#">Products</a></li> 118 <li><a href="#">Contact</a></li> 119 </ul> 120 </div> 121 122 <!-- Red Menu --> 123 <div id="menu_wrapper" class="red"> 124 <div class="left"></div> 125 <ul id="menu"> 126 <li><a href="#">Home</a></li> 127 <li class="active"><a href="#">About</a></li> 128 <li><a href="#">Services</a></li> 129 <li><a href="#">Products</a></li> 130 <li><a href="#">Contact</a></li> 131 </ul> 132 </div> 133 134 <!-- Orange Menu --> 135 <div id="menu_wrapper" class="orange"> 136 <div class="left"></div> 137 <ul id="menu"> 138 <li><a href="#">Home</a></li> 139 <li class="active"><a href="#">About</a></li> 140 <li><a href="#">Services</a></li> 141 <li><a href="#">Products</a></li> 142 <li><a href="#">Contact</a></li> 143 </ul> 144 </div> 145 </body> 146 </html>
使用css3:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS Menu</title> 6 <style type="text/css"> 7 body { 8 padding: 50px; 9 } 10 /* The CSS Code for the menu starts here */ 11 #menu { 12 font-family: Arial, sans-serif; 13 font-weight: bold; 14 text-transform: uppercase; 15 margin: 50px 0; 16 padding: 0 0 0 10px; 17 list-style-type: none; 18 font-size: 13px; 19 background: #eee; 20 height: 40px; 21 -moz-border-radius: 10px; 22 -webkit-border-radius: 10px; 23 border-top: 2px solid #eee; 24 border-left: 2px solid #eee; 25 border-bottom: 2px solid #ccc; 26 border-right: 2px solid #ccc; 27 } 28 #menu li { 29 float: left; 30 margin: 0; 31 32 } 33 #menu li a { 34 text-decoration: none; 35 display: block; 36 padding: 0 20px; 37 line-height: 40px; 38 color: #666; 39 } 40 #menu li a:hover, #menu li.active a { 41 background-color: #f5f5f5; 42 border-bottom: 2px solid #DDD; 43 color: #999; 44 } 45 46 /* Black Menu */ 47 #menu.black { 48 border-top: 2px solid #333; 49 border-left: 2px solid #333; 50 border-bottom: 2px solid #000; 51 border-right: 2px solid #000; 52 background: #333;} 53 #menu.black a {color: #CCC;} 54 #menu.black li a:hover, #menu.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;} 55 56 57 /* Blue Menu */ 58 #menu.blue { 59 border-top: 2px solid #356AA0; 60 border-left: 2px solid #356AA0; 61 border-bottom: 2px solid #204061; 62 border-right: 2px solid #204061; 63 background: #356AA0;} 64 #menu.blue a {color: #fff;} 65 #menu.blue li a:hover, #menu.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;} 66 67 /* Red Menu */ 68 #menu.red { 69 border-top: 2px solid #660000; 70 border-left: 2px solid #660000; 71 border-bottom: 2px solid #450000; 72 border-right: 2px solid #450000; 73 background: #660000;} 74 #menu.red a {color: #fff;} 75 #menu.red li a:hover, #menu.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;} 76 77 /* Orange Menu */ 78 #menu.orange { 79 border-top: 2px solid #d15600; 80 border-left: 2px solid #d15600; 81 border-bottom: 2px solid #B44500; 82 border-right: 2px solid #B44500; 83 background: #d15600;} 84 #menu.orange a {color: #fff;} 85 #menu.orange li a:hover, #menu.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;} 86 </style> 87 </head> 88 <body> 89 <!-- Grey Menu --> 90 <ul id="menu" class="grey"> 91 <li><a href="#">Home</a></li> 92 <li class="active"><a href="#">About</a></li> 93 <li><a href="#">Services</a></li> 94 <li><a href="#">Products</a></li> 95 <li><a href="#">Contact</a></li> 96 </ul> 97 98 <!-- Black Menu --> 99 <ul id="menu" class="black"> 100 <li><a href="#">Home</a></li> 101 <li class="active"><a href="#">About</a></li> 102 <li><a href="#">Services</a></li> 103 <li><a href="#">Products</a></li> 104 <li><a href="#">Contact</a></li> 105 </ul> 106 107 <!-- Blue Menu --> 108 <ul id="menu" class="blue"> 109 <li><a href="#">Home</a></li> 110 <li class="active"><a href="#">About</a></li> 111 <li><a href="#">Services</a></li> 112 <li><a href="#">Products</a></li> 113 <li><a href="#">Contact</a></li> 114 </ul> 115 116 <!-- Red Menu --> 117 <ul id="menu" class="red"> 118 <li><a href="#">Home</a></li> 119 <li class="active"><a href="#">About</a></li> 120 <li><a href="#">Services</a></li> 121 <li><a href="#">Products</a></li> 122 <li><a href="#">Contact</a></li> 123 </ul> 124 125 <!-- Orange Menu --> 126 <ul id="menu" class="orange"> 127 <li><a href="#">Home</a></li> 128 <li class="active"><a href="#">About</a></li> 129 <li><a href="#">Services</a></li> 130 <li><a href="#">Products</a></li> 131 <li><a href="#">Contact</a></li> 132 </ul> 133 </body> 134 </html>
其中图片有:
black.png:
blue.png:
white.png:
orange.png:
red.png:
2.还原出4个案例导航后,完成a,b,c的小任务
a任务 b任务 c任务
完成后的推荐代码为:
a任务:
a.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" type="text/css" href="a.css" /> 6 <script type="text/javascript" src="a.js"></script> 7 </head> 8 <body onmousedown="disappear()"> 9 <ul id="nav"> 10 <li><a href=" #">Web</a></li> 11 <li><a href=" #">Images</a></li> 12 <li><a href=" #">Videos</a></li> 13 <li><a href=" #">Maps</a></li> 14 <li><a href=" #">News</a></li> 15 <li><a href=" #">Gmail</a></li> 16 <li class="more0"><a href=" #" onmousedown="appear()" onmouseover="a1()"onmouseout="a0()">more</a> 17 <ul id="more"> 18 <li><a href=" #">Shopping</a></li> 19 <li><a href=" #">Translate</a></li> 20 <li><a href=" #">Books</a></li> 21 <li><a href=" #">Finance</a></li> 22 <li><a href=" #">Scholar</a></li> 23 <li><a href=" #">Blogs</a></li> 24 <li><a href=" #">YouTube</a></li> 25 <li><a href=" #">Calendar</a></li> 26 <li><a href=" #">Photos</a></li> 27 <li><a href=" #">Documents</a></li> 28 <li><a href=" #">Reader</a></li> 29 <li><a href=" #">Sites</a></li> 30 <li><a href=" #">Groups</a></li> 31 <li><a href=" #">even more >></a></li> 32 </ul> 33 </li> 34 </ul> 35 </body> 36 </html>
其中图片有:
a.png:
a.css
1 body{ 2 margin:0; 3 padding:0; 4 border:0; 5 font-family:arial,"\5b8b\4f53",Verdana,sans-serif; 6 height:900px; 7 } 8 #nav{ 9 background:#2D2D2D; 10 margin:3px; 11 height:30px; 12 } 13 #nav li{ 14 margin:0px; 15 padding:0px; 16 float:left; 17 } 18 #nav li a{ 19 font-size:13px; 20 color:#CBCBC6; 21 display:block; 22 padding:7px; 23 text-decoration:none; 24 } 25 #nav li a:hover{ 26 background:white; 27 color:#3266CB; 28 } 29 #nav li:hover a{ 30 background:white; 31 color:#3266CB; 32 } 33 #nav li ul{ 34 position:relative; 35 background:white; 36 border:1px #CBCBC6 solid; 37 width:90px; 38 height:400px; 39 display:none; 40 } 41 #nav li ul li{ 42 clear:both; 43 } 44 #nav li ul li a{ 45 font-size:12px; 46 color:#3266CB; 47 display:block; 48 padding:5px; 49 width:79px; 50 } 51 #nav li ul li a:hover{ 52 background:#EFF3FB; 53 } 54 .more0 a:hover{ 55 width:79px; 56 background:none; 57 background: #FFFFFF url("a.png") no-repeat center right; 58 }
a.js
1 var a=0; 2 function a1(){ 3 a=1; 4 } 5 function a0(){ 6 a=0; 7 } 8 function appear(){ 9 var y=document.getElementById("more"); 10 if(!y.style.display) 11 y.style.display="none"; 12 if(y.style.display=="none") 13 y.style.display="block"; 14 else y.style.display="none"; 15 } 16 function disappear(){ 17 var y=document.getElementById("more"); 18 if(y.style.display!="none"&&a==0) 19 y.style.display="none"; 20 }
b任务:
方法一:
b.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" type="text/css" href="b.css" /> 6 <script type="text/javascript" src="b.js"></script> 7 </head> 8 <body> 9 <ul id="nav"> 10 <li><a href=" #">Home</a></li> 11 <li><a href=" #">Products</a> 12 <ul id="products"> 13 <li><a href=" #">Drop Down CSS Menus</a></li> 14 <li><a href=" #">Horizontal CSS Menus</a> 15 <ul class="product0"> 16 <li><a href=" #">product1</a></li> 17 <li><a href=" #">product2</a></li> 18 <li><a href=" #">product3</a></li> 19 <li><a href=" #">product4</a></li> 20 </ul> 21 </li> 22 <li><a href=" #">Vertical CSS Menus</a> 23 <ul class="menu0"> 24 <li><a href=" #">menu1</a></li> 25 <li><a href=" #">menu2</a></li> 26 <li><a href=" #">menu3</a></li> 27 <li><a href=" #">menu4</a></li> 28 </ul> 29 </li> 30 <li><a href=" #">Dreamweaver Menus</a></li> 31 </ul> 32 </li> 33 <li><a href=" #">FAQ</a> 34 <ul id="faq"> 35 <li><a href=" #">Drop Down CSS Menus</a></li> 36 <li><a href=" #">Horizontal CSS Menus</a></li> 37 <li><a href=" #">Vertical CSS Menus</a></li> 38 <li><a href=" #">Dreamweaver Menus</a></li> 39 </ul> 40 </li> 41 <li><a href=" #">Contact</a></li> 42 </ul> 43 </body> 44 </html>
b.css
1 body{ 2 margin:0; 3 padding:0; 4 border:0; 5 font-family:arial,"\5b8b\4f53",Verdana,sans-serif; 6 height:800px; 7 } 8 #nav{ 9 height:37px; 10 background-color:#333333; 11 margin:41px 5px; 12 } 13 #nav li { 14 margin:0px; 15 float:left; 16 padding:0px; 17 background:#333333 url("images/seperator.gif") bottom right no-repeat; 18 text-align:center; 19 } 20 #nav li a{ 21 color:white; 22 font-size:15px; 23 display:block; 24 text-decoration:none; 25 padding:10px 24px; 26 } 27 #nav li ul{ 28 display:none; 29 } 30 #nav li:hover ul{ 31 background-color:#333333; 32 display:block; 33 position:absolute; 34 } 35 #nav li.sfhover ul{ 36 background-color:#333333; 37 display:block; 38 position:absolute; 39 } 40 #nav li:hover{ 41 background:#478baf url("images/hover.gif") bottom center no-repeat; 42 } 43 #nav li a:hover{ 44 background:#478baf url("images/hover.gif") bottom center no-repeat; 45 } 46 #nav li ul li{ 47 clear:both; 48 text-decoration:none; 49 width:225px; 50 background:#333333 url("images/sub_sep.gif") bottom left no-repeat; 51 } 52 #nav li ul li a{ 53 font-size:12px; 54 text-align:left; 55 } 56 #nav li ul li a:hover{ 57 background:#478baf url("images/hover_sub.gif") center left no-repeat; 58 } 59 #nav li:hover ul li ul{ 60 display:none; 61 width:220px; 62 height:140px; 63 } 64 #nav li.sfHover ul li ul{ 65 display:none; 66 width:220px; 67 height:140px; 68 } 69 .product0{ 70 position:absolute; 71 top:35px; 72 left:225px; 73 } 74 .menu0{ 75 position:absolute; 76 top:70px; 77 left:225px; 78 } 79 #nav0{ 80 position:absolute; 81 top:70px; 82 left:225px; 83 } 84 85 #nav li:hover ul li:hover ul{ 86 display:block; 87 } 88 #nav li.sfHover ul li.sffHover ul{ 89 display:block; 90 } 91 #nav li ul li ul li{ 92 text-decoration:none; 93 width:225px; 94 background:#333333 url("images/sub_sep.gif") bottom left no-repeat; 95 } 96 #nav li ul li ul li a{ 97 font-size:12px; 98 text-align:left; 99 }
b.js
1 sfHover =function() { 2 var sfEls = document.getElementById("nav").getElementsByTagName("li"); 3 for (var i=0; i<sfEls.length; i++) { 4 sfEls[i].onmouseover=function() { 5 this.className+=" sfhover"; 6 } 7 sfEls[i].onmouseout=function() { 8 this.className=this.className.replace(new RegExp(" sfhover\b"), ""); 9 } 10 } 11 } 12 13 sffHover =function() { 14 var sffEls = document.getElementById("products").getElementsByTagName("li"); 15 for (var j=0; j<sffEls.length; j++) { 16 sffEls[j].onmouseover=function() { 17 this.className=" sffhover"; 18 } 19 sffEls[j].onmouseout=function() { 20 this.className=this.className.replace(new RegExp(" sffhover\b"), ""); 21 } 22 } 23 } 24 if (window.attachEvent) window.attachEvent("onload", sffHover); 25 if (window.attachEvent) window.attachEvent("onload", sfHover);
方法二:
b2.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" type="text/css" href="b2.css" /> 6 </head> 7 <body> 8 <ul id="nav"> 9 <li><a href=" #">Home</a></li> 10 <li><a href=" #">Products<![if !IE 6]></a><![endif]> 11 <![if IE 6]> 12 <table class="pro"><tr><td> 13 <![endif]> 14 <ul> 15 <li><a href=" #">Drop Down CSS Menus</a></li> 16 <li><a href=" #" class="drop">Horizontal CSS Menus<![if !IE 6]></a><![endif]> 17 <![if IE 6]> 18 <table class="pro0"><tr><td> 19 <![endif]> 20 <ul class="product0"> 21 <li><a href=" #">product1</a></li> 22 <li><a href=" #">product2</a></li> 23 <li><a href=" #">product3</a></li> 24 <li><a href=" #">product4</a></li> 25 </ul> 26 <![if IE 6]> 27 </td></tr></table> 28 </a> 29 <![endif]> 30 </li> 31 <li><a href=" #" class="drop">Vertical CSS Menus<![if !IE 6]></a><![endif]> 32 <![if IE 6]> 33 <table class="men0"><tr><td> 34 <![endif]> 35 <ul class="menu0"> 36 <li><a href=" #">menu1</a></li> 37 <li><a href=" #">menu2</a></li> 38 <li><a href=" #">menu3</a></li> 39 <li><a href=" #">menu4</a></li> 40 </ul> 41 <![if IE 6]> 42 </td></tr></table> 43 </a> 44 <![endif]> 45 </li> 46 <li><a href=" #">Dreamweaver Menus</a></li> 47 </ul> 48 <![if IE 6]> 49 </td></tr></table> 50 </a> 51 <![endif]> 52 </li> 53 <li><a href=" #">FAQ<![if !IE 6]></a><![endif]> 54 <![if IE 6]> 55 <table class="faq"><tr><td> 56 <![endif]> 57 <ul> 58 <li><a href=" #">Drop Down CSS Menus</a></li> 59 <li><a href=" #">Horizontal CSS Menus</a></li> 60 <li><a href=" #">Vertical CSS Menus</a></li> 61 <li><a href=" #">Dreamweaver Menus</a></li> 62 </ul> 63 <![if IE 6]> 64 </td></tr></table> 65 </a> 66 <![endif]> 67 </li> 68 <li><a href=" #">Contact</a></li> 69 </ul> 70 </body> 71 </html>
b2.css
1 body{ 2 margin:0; 3 padding:0; 4 border:0; 5 font-family:arial,"\5b8b\4f53",Verdana,sans-serif; 6 height:800px; 7 } 8 9 #nav{ 10 height:37px; 11 background-color:#333333; 12 margin:41px 5px; 13 } 14 #nav li { 15 margin:0px; 16 float:left; 17 padding:0px; 18 background:#333333 url("images/seperator.gif") bottom right no-repeat; 19 text-align:center; 20 } 21 #nav li a{ 22 color:white; 23 font-size:15px; 24 display:block; 25 text-decoration:none; 26 padding:10px 24px; 27 } 28 #nav li ul{ 29 display:none; 30 } 31 #nav li a table{ 32 display:none; 33 } 34 .pro{ 35 left:92px; 36 } 37 .faq{ 38 left:199px; 39 } 40 41 #nav li:hover ul{ 42 background-color:#333333; 43 display:block; 44 position:absolute; 45 } 46 47 #nav li a:hover table{ 48 position:absolute; 49 top:78px; 50 display:block; 51 } 52 #nav li a:hover table ul{ 53 display:block; 54 position:relative; 55 } 56 57 #nav li:hover{ 58 background:#478baf url("images/hover.gif") bottom center no-repeat; 59 } 60 #nav li a:hover{ 61 background:#478baf url("images/hover.gif") bottom center no-repeat; 62 } 63 #nav li ul li{ 64 clear:both; 65 text-decoration:none; 66 width:225px; 67 background:#333333 url("images/sub_sep.gif") bottom left no-repeat; 68 } 69 #nav li ul li a{ 70 font-size:12px; 71 text-align:left; 72 } 73 #nav li ul li a:hover{ 74 background:#478baf url("images/hover_sub.gif") center left no-repeat; 75 } 76 #nav li a table{ 77 margin:0px; 78 padding:0px; 79 border:0px; 80 } 81 #nav li:hover ul li ul{ 82 display:none; 83 width:220px; 84 height:140px; 85 } 86 #nav li a:hover ul li ul{ 87 display:none; 88 width:220px; 89 height:140px; 90 } 91 .pro0{ 92 position:absolute; 93 top:35px; 94 left:225px; 95 } 96 .men0{ 97 position:absolute; 98 top:70px; 99 left:225px; 100 } 101 .product0{ 102 position:absolute; 103 *top:35px; 104 *left:225px; 105 } 106 .menu0{ 107 position:absolute; 108 *top:70px; 109 *left:225px; 110 } 112 #nav li:hover ul li:hover ul{ 113 display:block; 114 } 115 #nav li a:hover table ul li a:hover table ul{ 116 display:block; 117 } 118 #nav li ul li ul li{ 119 text-decoration:none; 120 width:225px; 121 background:#333333 url("images/sub_sep.gif") bottom left no-repeat; 122 } 123 #nav li ul li ul li a{ 124 font-size:12px; 125 text-align:left; 126 }
c任务:
c.css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" type="text/css" href="c.css" /> 6 </head> 7 <body> 8 <ul id="nav"> 9 <li><a href=" #">Home</a></li> 10 <li><a href=" #">Products</a> 11 <ul class="product0"> 12 <li><a href=" #">product1</a></li> 13 <li><a href=" #">product2</a> 14 <ul class="product2_0"> 15 <li><a href=" #">product2.1</a></li> 16 <li><a href=" #">product2.2</a></li> 17 <li><a href=" #">product2.3</a></li> 18 <li><a href=" #">product2.4</a></li> 19 </ul> 20 </li> 21 <li><a href=" #">product3</a> 22 <ul class="product3_0"> 23 <li><a href=" #">product3.1</a></li> 24 <li><a href=" #">product3.2</a></li> 25 <li><a href=" #">product3.3</a></li> 26 <li><a href=" #">product3.4</a></li> 27 </ul> 28 </li> 29 <li><a href=" #">product4</a></li> 30 </ul> 31 </li> 32 <li><a href=" #">Services</a> 33 <ul class="service0"> 34 <li><a href=" #">service1</a></li> 35 <li><a href=" #">service2</a></li> 36 <li><a href=" #">service3</a></li> 37 <li><a href=" #">service4</a></li> 38 </ul> 39 </li> 40 <li><a href=" #">Support</a></li> 41 <li><a href=" #">FAQ</a></li> 42 </ul> 43 </body> 44 </html>
b2.css
1 body{ 2 margin:0; 3 padding:0; 4 border:0; 5 font-family:arial,"\5b8b\4f53",Verdana,sans-serif; 6 } 7 #nav{ 8 width:190px; 9 background-color:#333333; 10 margin:5px 5px; 11 } 12 #nav li { 13 margin:0px; 14 padding:0px; 15 background:#333333 url("images/seperator.gif") bottom right no-repeat; 16 text-align:center; 17 width:190px; 18 border:0px; 19 } 20 #nav li a{ 21 color:#CCCCCC; 22 display:block; 23 text-decoration:none; 24 font-size:11px; 25 text-align:left; 26 padding:8px 15px; 27 border-bottom:1px solid #393939; 28 margin:0px; 29 } 30 #nav li:hover{ 31 background:#478baf url("images/hover.gif") center left no-repeat; 32 } 33 #nav li a:hover{ 34 background:#478baf url("images/hover.gif") center left no-repeat; 35 } 36 #nav li ul{ 37 display:none; 38 } 39 #nav li:hover ul{ 40 display:block; 41 position:absolute; 42 left:195px; 43 } 44 .product0{ 45 top:36px; 46 } 47 .service0{ 48 top:68px; 49 } 50 #nav li:hover ul{ 51 *left:198px; 52 } 53 .product0{ 54 *top:42px; 55 } 56 .service0{ 57 *top:74px; 58 } 59 #nav li:hover ul li ul{ 60 display:none; 61 } 62 #nav li:hover ul li:hover ul{ 63 display:block; 64 position:absolute; 65 left:190px; 66 } 67 .product2_0{ 68 top:36px; 69 } 70 .product3_0{ 71 top:68px; 72 } 73 .product2_0{ 74 *top:31px; 75 } 76 .product3_0{ 77 *top:63px; 78 } 79 #nav li ul li{ 80 *margin:-3px; 81 }