一个非常简单的导航DEMO

陈字文

于 2014-01-21 22:38:46 发布

阅读量2.7k

点赞数 1

分类专栏： JSP相关内容

本文链接：https://blog.csdn.net/ziwen00/article/details/18627687

版权

JSP相关内容专栏收录该内容

3 篇文章 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" />
	<link rel="stylesheet" href="nav.css" type="text/css" />
</head>
<body>
<div id="navigation">
	<ul>
		 <li class="logo">LOGO</li>
		 <li><a href="#">SSSSSS</a>
				<ul>
					 <li><a href="#">SSSSSS</a></li>
					 <li><a href="#">SSSSSS</a></li>
					 <li><a href="#">SSSSSS</a></li>
				</ul>
		</li>
		<li><a href="#">MMMMMM</a>
				<ul>
					 <li><a href="#">MMMMMM</a></li>
					 <li><a href="#">MMMMMM</a></li>
				</ul>
		 </li>
		<li><a href="#">PPPPPPPPPPPP</a>
				<ul>
					 <li><a href="#">PPPPPPPPPPPP</a></li>
					 <li><a href="#">PPPPPPPPPPPP</a></li>
					 <li><a href="#">PPPPPPPPPPPP</a></li>
           <li><a href="#">PPPPPPPPPPPP</a></li>
        </ul>
    </li>
		<li><a href="#">CCCCCCCC</a></li>
	</ul>
	<span id="logout"><a href="#">logout</a></span>
</div>
</body>
</html>

使用的CSS文件:

#navigation { 
	width:1000px; 
	padding:2px 8px 2px 8px; 
	margin:8px auto; 
	background:#3B5998;
	height:60px;
	font:20px/3em Helvetica, Arial, sans-serif;
}
#navigation *{
	margin:0; padding:0;
}
#navigation .logo{
	margin-right:30px;
}
#navigation ul li { 
	list-style:none;
	float:left; 
	margin-right:20px;
	position: relative ;
	z-index:100;
}
#navigation ul li a {
	font-size:13px;
	width:100px;
	display:block;
	padding:0 8px; 
	background:#A0B4DC; 
	font-weight:700;
	color:#0287CA; 
	text-decoration:none; 
}
#navigation ul li a:hover { 
	background:none; 
	color:#fff;
	text-decoration:underline;
}
#navigation ul li ul{
	background-color: #88C366;
	position: absolute;
	width: 80px;
	overflow:hidden;
	display:none;
}
#navigation ul li:hover ul{
	background-color: #88C366;
	position: absolute;
	width: 100px;
	display:block;
}
#navigation ul li ul li{
	border-bottom: 1px solid #BBB;
	text-align: left;
	width: 100%;
}
#navigation #logout{
	font-size:12px;
	float:right;
}