导航菜单倾斜效果制作方法，用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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>纯css制作导航菜单倾斜显示效果_武鸣人</title>
<style type="text/css">
#pad {height:150px;}
#menu_wumingren {padding:0 0 0 30px; margin:0; list-style:none;}
#menu_wumingren li {float:left; position:relative; margin-right:2px; display:block; height:0; width:60px; border-bottom:30px solid #069; border-left:30px dashed transparent;}
#menu_wumingren li a {position:absolute; left:60px; top:0; border-top:30px solid #069; border-right:30px dotted transparent; text-decoration:none; font-family:arial, sans-serif; font-size:12px; color:#fff;}
#menu_wumingren li a b {display:block; background:#069; position:absolute; top:-30px; left:-60px; width:60px; height:30px; line-height:30px; text-align:center; cursor:pointer; font-weight:normal;}
#menu_wumingren li#single_wuming {width:80px;}
#menu_wumingren li#single_wuming a {left:80px;}
#menu_wumingren li#single_wuming a b {left:-80px; width:80px;}
#menu_wumingren li a:hover {color:#000;}
.home_wuming #menu_wumingren li#home_wuming,
.single_wuming #menu_wumingren li#single_wuming,
.dropdown_wuming #menu_wumingren li#dropdown_wuming,
.dropline_wuming #menu_wumingren li#dropline_wuming,
.flyout_wuming #menu_wumingren li#flyout_wuming,
.support #menu_wumingren li#support,
.contact #menu_wumingren li#contact
{border-bottom-color:#e70;}
.home_wuming #menu_wumingren li#home_wuming a,
.single_wuming #menu_wumingren li#single_wuming a,
.dropdown_wuming #menu_wumingren li#dropdown_wuming a,
.dropline_wuming #menu_wumingren li#dropline_wuming a,
.flyout_wuming #menu_wumingren li#flyout_wuming a,
.support #menu_wumingren li#support a,
.contact #menu_wumingren li#contact a
{color:#000; border-top-color:#e70;}
.home_wuming #menu_wumingren li#home_wuming a b,
.single_wuming #menu_wumingren li#single_wuming a b,
.dropdown_wuming #menu_wumingren li#dropdown_wuming a b,
.dropline_wuming #menu_wumingren li#dropline_wuming a b,
.flyout_wuming #menu_wumingren li#flyout_wuming a b,
.support #menu_wumingren li#support a b,
.contact #menu_wumingren li#contact a b
{background:#e70;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul id="menu_wumingren">
<li id="home_wuming"><a href="https://www.wuming.ren" target="_blank"><b>武鸣人</b></a></li>
<li id="single_wuming"><a href="https://www.wuming.ren" target="_blank"><b>武鸣人一</b></a></li>
<li id="dropdown_wuming"><a href="https://www.wuming.ren" target="_blank"><b>武鸣人二</b></a></li>
<li id="dropline_wuming"><a href="https://www.wuming.ren" target="_blank"><b>武鸣人三</b></a></li>
<li id="flyout_wuming"><a href="https://www.wuming.ren" target="_blank"><b>武鸣人四</b></a></li>
<li id="support"><a href="https://www.wuming.ren" target="_blank"><b>武鸣人五</b></a></li>
<li id="contact"><a href="https://www.wuming.ren" target="_blank"><b>武鸣人六</b></a></li>
</ul>
</body>
</html>本文来自武鸣人网站，转载请注明出处