ul,li结构的横向CSS菜单,有立体感的按钮菜单

2024-09-05 12:20:52

字体：大中小

来源：转载

供稿：网友

横向有立体感的CSS按钮式菜单，采用了CSS常用的UL/LI结构，布局方便，将LI定义为按钮样式，鼠标放上后显示出立体效果，整体视觉体验舒服，代码兼容性好，简洁高效。

<!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>横向有立体感的CSS按钮式菜单</title><style>#navigation {	font-family: Arial, Helvetica, sans-serif;	font-size: 9pt;}#navigation ul {	list-style: none;	margin: 0;	padding: 0;	padding-top: 4px;}#navigation li {	display: inline;}#navigation a:link, #navigation a:visited { 	margin-right: 2px;	padding: 3px 10px 2px 10px; 	color: #A62020;	background-color: #FCE6EA;	text-decoration: none;	border-top: 1px solid #FFFFFF;	border-left: 1px solid #FFFFFF;	border-bottom: 1px solid #717171;	border-right: 1px solid #717171;}#navigation a:hover {	border-top: 1px solid #717171;	border-left: 1px solid #717171;	border-bottom: 1px solid #FFFFFF;	border-right: 1px solid #FFFFFF;}</style></head><body id="contact"><div id="navigation">  <ul>    <li class="recipes">武林网</li>    <li class="contact">开源源码</li>    <li class="articles">网页特效</li><li class="articles">官方博客</li><li class="articles">友情链接</li>    <li class="buy">联系我们</li>  </ul></div></body></html>

上一篇：CSS图标菜单,带有小图片的LI列表菜单

下一篇：极简洁的标准CSS导航菜单代码