帶導航標志的CSS豎向簡潔菜單

2024-09-05 12:20:47

字體：大中小

來源：轉載

供稿：網友

帶導航標志的CSS豎向簡潔菜單，簡約美觀、實用精致。不會用CSs制作菜單的朋友，本例可作為你的終極范例，代碼易懂。覺得有用的直接復制代碼就可以用了。兼容性也不錯，在各大瀏覽器中表現良好。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>帶導航標志的簡潔菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{font:normal 62.5%/1.7 verdana,geneva,helvetica,arial,sans-serif;margin:0;padding:0;}.column{float:left;}#content{margin-left:20%;width:60%;}#navigation{margin-left:-80%;width:20%;}*html .column{display:inline;}*html #navigation li{height:1%;}.column .wrap{padding:20px;}#content .wrap{padding:20px 30px;}#content p{margin-top:0;}#content p:first-child{font:normal 1.4em/1.6 Georgia,times,"times new roman",serif;}#content p:first-child:first-line{text-transform:uppercase;}#navigation ul{list-style:none;margin:0;padding:0;}#navigation ul li{margin-bottom:.4em;}#navigation ul li a{background:#36c;display:block;color:#fff;border-left:7px solid #09f;padding:.4em .4em .4em 20px;text-decoration:none;}#navigation ul li a:hover{border-left:none;border-right:7px solid #09f;padding-left:27px;}</style></head><body><div   class="iwvjtn8m0"   id="content" class="column"></div><div   class="iwvjtn8m0"   id="navigation" class="column">	<div   id="iwvjtn8m0"   class="wrap">		<ul>			<li>Menu 1</li>			<li>Menu 2</li>			<li>Menu 3</li>			<li>Menu 4</li>		</ul>	</div></div></body></html>

上一篇：jQuery 仿美橙互聯兩級導航菜單

下一篇：橫向展開菜單(JSON數據源，只兼容IE8)