html+css下拉菜单

小李不是李

于 2015-08-18 11:44:39 发布

443

分类专栏： HTML+CSS+JS 文章标签： html css

本文链接：https://blog.csdn.net/yimeng19931020/article/details/47749793

版权

HTML+CSS+JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;">    html文件：

<html>
<head>
	<meta charset="utf-8">
	<title>下拉菜单</title>
	<link rel="stylesheet" type="text/css" href="http://li157053220.blog.163.com/css/menu.css">
	<!--
		<style type="text/css">
		</style>
	-->
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="http://li157053220.blog.163.com/#">首页</a></li>
			<li><a href="http://li157053220.blog.163.com/#">课程大厅</a>
				<ul>
					<li><a href="http://li157053220.blog.163.com/">javaScrit</a></li>
					<li><a href="http://li157053220.blog.163.com/"><a href="http://li157053220.blog.163.com/">Jquery</a></li>
					<li><a href="http://li157053220.blog.163.com/">php</a></li>
				</ul>
			</li>
			<li><a href="http://li157053220.blog.163.com/#">学习中心</a>
				<ul>
					<li><a href="http://li157053220.blog.163.com/">学习计划</a></li>
					<li><a href="http://li157053220.blog.163.com/">在线学习</a></li>
					<li><a href="http://li157053220.blog.163.com/"><a href="http://li157053220.blog.163.com/">视频下载</a></li>
					<li><a href="http://li157053220.blog.163.com/">在线提问</a></li>
				</ul>
			</li>
			<li><a href="http://li157053220.blog.163.com/#">关于我们</a></li>
		</ul>
	</div>
</body>
</html>



   css文件：

	* {
		margin:0px;
		padding: 0px;
	}
	#nav {
		background-color: #eee; 
		width:390px;
		height: 40;
		margin: 0 auto;
	}
	ul {
		/*
			list-style 样式，去除
		*/
		list-style: none; 
	}
	ul li {
		float: left;
		/*width: 90px;*/
		padding: 0 10px;
		line-height: 40px;
		text-align: center;
		position: relative;
	}
	a {
		text-decoration: none;
		color:#000;		
		display: block;		
		padding: 0 10px;
	}
	a:hover {
		color: #FFF;
		background-color: #666;
	}
	ul li ul li {
		float: none;
		background-color: #eee;
		margin-top: 2px;
	}
	ul li ul {
		position: absolute;
		left: 0px;
		top: 40px;
		display: none;
	}
	ul li ul li a:hover{
		/*color:#FFF;*/
		background-color:blue;
	}
	ul li:hover ul {
		display: block;
	}</span>