带导航标志的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 id="content" class="column"></div><div id="navigation" class="column">	<div 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)