html+css菜單

1、3D的立體菜單

html文件：

<div id="menu">
    <a href="#"> Home</a>
    <a href="#"> Contact Us</a>
    <a href="#"> Web Dev</a>
    <a href="#"> Web Design</a>
    <a href="#"> Map</a>
</div>

css文件：

        #menu{
		font-family:"Lucida Calligraphy";
		font-size:14px;
	}
	#menu a,#menu a:visited{
		text-decoration:none;
		text-align:center;
		color:#fff;
		
		display:block;
		width:10em;
		padding:0.25em;
		margin:0.5em auto;
		
		background-color:#8ab;
		border:2px solid #fff;
		border-color:#def #678 #345 #cde;
		position:relative;
	}
	#menu a:hover{
		top:2px;
		left:2px;
		border-color:#345 #cde #678 #def;
	}

效果圖：

2、垂直菜單

html文件：

	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact us</a></li>
			<li ><a href="#">Web Dev</a></li>
			<li><a href="#">Web Design</a></li>
			<li><a href="#">Map</a></li>
		</ul>
	</div>

css文件：

		body{
			font-family:"Lucida Calligraphy";
			background-color:#dee0ff;
			margin:0;
		}
		#navigation{
			width:150px;
			font-size:15px;
			text-align:right;
		}
		#navigation ul{
			list-style-type:none;
			margin:0px;
			padding:0px;
		}
		#navigation li{
			border-bottom:1px solid  #9F9F9F;
		}
		#navigation li a{
			display:block; /*超鏈接設置成塊元素,只要鼠標進入該塊，都會被激活*/
			height:1em;
			padding:5px 5px 5px 0.5em;
			text-decoration:none; /*去除下劃線*/
			border-left:12px solid #151571;
			border-right:1px solid #151571;
		}
		#navigation li a, #navigation li a:visited{
			background-color:#1136c1;
			color:#fff;
		}
		#navigation li a:hover{
			background-color:#002099;
			color:#ffff00;
			border-left:12px solid yellow;
		}

效果圖：

3、橫向菜單

html文件：

	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact us</a></li>
			<li ><a href="#">Web Dev</a></li>
			<li><a href="#">Web Design</a></li>
			<li><a href="#">Map</a></li>
		</ul>
	</div>

css文件

		body{
			font-family:"Lucida Calligraphy";
			background-color:#dee0ff;
			margin:0;
		}
		#navigation{
			font-size:15px;
			text-align:right;
		}
		#navigation ul{
			list-style-type:none;
			margin:0px;
			padding:0px;
		}
		#navigation li{
			border-bottom:1px solid  #9F9F9F;
			float:left;
		}
		#navigation li a{
			width:100px;
			display:block; /*超鏈接設置成塊元素,只要鼠標進入該塊，都會被激活*/
			height:1em;
			padding:5px 5px 5px 0.5em;
			text-decoration:none; /*去除下劃線*/
			border-left:12px solid #151571;
			border-right:1px solid #151571;
		}
		#navigation li a, #navigation li a:visited{
			background-color:#1136c1;
			color:#fff;
		}
		#navigation li a:hover{
			background-color:#002099;
			color:#ffff00;
			border-left:12px solid yellow;
		}

效果圖：