用css制作导航
一个不错的用纯css导航,记录在这里:
0--完整的html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ page language="java" contentType="text/html;charset=UTF-8" %> <head> <title>演示导航布局</title> <link rel="stylesheet" type="text/css" href="../css/mycss.css"> </head> <body> <center> 下面是导航演示 <div id="nav"> <ul id="menu"> <li><a href="">Home</a></li> <li><a href="">Products</a> <ul> <li><a href="">product1</a></li> <li><a href="">product2</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere</a></li> </ul> </li> </ul> </div> <style type="text/css"> /*用css实现导航 */ #nav ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } #nav ul li { display: block; position: relative; float: left; } #nav li ul { display: none; } #nav ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } #nav ul li a:hover { background: #617F8A; } #nav li:hover ul { display: block; position: absolute; } #nav li:hover li { float: none; font-size: 11px; } #nav li:hover a { background: #617F8A; } #nav li:hover li a:hover { background: #95A9B1; } </style> </center> </body> </html>
--1/html代码:
1 <ul id="menu"> 2 <li><a href="">Home</a></li> 3 <li><a href="">About Us</a> 4 <ul> 5 <li><a href="">The Team</a></li> 6 <li><a href="">History</a></li> 7 <li><a href="">Vision</a></li> 8 </ul> 9 </li> 10 <li><a href="">Products</a> 11 <ul> 12 <li><a href="">product1</a></li> 13 <li><a href="">product2</a></li> 14 <li><a href="">product3</a></li> 15 <li><a href="">product4</a></li> 16 <li><a href="">product1</a></li> 17 </ul> 18 </li> 19 <li><a href="">Contact</a> 20 <ul> 21 <li><a href="">Online</a></li> 22 <li><a href="">Right Here</a></li> 23 <li><a href="">Somewhere Else</a></li> 24 </ul> 25 </li> 26 </ul>
2/css代码
1 ul { 2 font-family: Arial, Verdana; 3 font-size: 14px; 4 margin: 0; 5 padding: 0; 6 list-style: none; 7 } 8 ul li { 9 display: block; 10 position: relative; 11 float: left; 12 } 13 li ul { display: none; } 14 ul li a { 15 display: block; 16 text-decoration: none; 17 color: #ffffff; 18 border-top: 1px solid #ffffff; 19 padding: 5px 15px 5px 15px; 20 background: #2C5463; 21 margin-left: 1px; 22 white-space: nowrap; 23 } 24 ul li a:hover { background: #617F8A; } 25 li:hover ul { 26 display: block; 27 position: absolute; 28 } 29 li:hover li { 30 float: none; 31 font-size: 11px; 32 } 33 li:hover a { background: #617F8A; } 34 li:hover li a:hover { background: #95A9B1; }
--效果图: