倾斜的css导航菜单

最新推荐文章于 2024-07-18 17:34:14 发布

sjf0115

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量1.8k

点赞数 2

文章标签： css xhtml float html

本文链接：https://blog.csdn.net/SJF0115/article/details/7582167

版权

Div+CSS+JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title> 倾斜的css导航菜单</title>
<style type="text/css">
#pad {height:150px;}
#menu {padding:0 0 0 30px; margin:0; list-style:none;}
#menu 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 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 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 li#single {width:80px;}
#menu li#single a {left:80px;}
#menu li#single a b {left:-80px; width:80px;}
#menu li a:hover {color:#000;}
.home #menu li#home,
.single #menu li#single,
.dropdown #menu li#dropdown,
.dropline #menu li#dropline,
.flyout #menu li#flyout,
.support #menu li#support,
.contact #menu li#contact
{border-bottom-color:#e70;}
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{color:#000; border-top-color:#e70;}
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{background:#e70;}
</style>
</head>
<body>
	<ul id="menu">
	<li id="home"><a href="#" target="_blank"><b>Home</b></a></li>
	<li id="single"><a href="#" target="_blank"><b>Menu1</b></a></li>
	<li id="dropdown"><a href="#" target="_blank"><b>Menu2</b></a></li>
	<li id="dropline"><a href="#" target="_blank"><b>Menu3</b></a></li>
	<li id="flyout"><a href="#" target="_blank"><b>Menu4</b></a></li>
	<li id="support"><a href="#" target="_blank"><b>About</b></a></li>
	<li id="contact"><a href="#" target="_blank"><b>Contact</b></a></li>
	</ul>
</body>
</html>

sjf0115

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
倾斜的css导航菜单

倾斜的css导航菜单#pad {height:150px;}#menu {padding:0 0 0 30px; margin:0; list-style:none;}#menu li {float:left; position:relative; margin-right:2px; display:block; height:0; width:60px; border-bottom:30
复制链接

扫一扫

专栏目录