导航栏的展示_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏</title> <link rel="stylesheet" type="text/css&quo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>导航栏</title>
	<link rel="stylesheet" type="text/css" href="">
	<link rel="shortcut icon" type="image/x-icon" href="">

	<style type="text/css">
			
			*{margin: 0px;padding: 0px;}
		body{background: #ccc;margin: 40px;}	
			
		ul li{list-style: none;width: 100px;height: 40px;line-height: 40px;text-align: center;float: left; }
		ul li a{text-decoration: none;}
		ul li a:hover{text-decoration: underline;}
		
		.clear{clear: both;}
		
		.main{position: relative;}

		.main_menu{width: 216px;height: 510px;background:#2B333B;padding-top: 15px;padding-bottom: 15px;
			border-bottom-left-radius: 8px;border-top-left-radius: 8px;text-align: center;}
		
		.menu{width: 216px;height: 60px;line-height: 60px;text-align: center;color:#AAADB1;}

		.menu:hover{background: #6B7176}



		.item{
    	position: absolute;
    	top: 0px;
    	display: none;
    	left: 216px;
    	background-color: #fcfcfc;
    	padding-left: 30px;
    	width: 640px;
    	padding-right: 30px;
    	height: 400px;
    	padding-top: 10px;
    	border-bottom-right-radius: 10px;
    	border-top-right-radius: 10px;
    	box-shadow: 4px 4px 5px -1px #2B333B;}

		.menu:hover  .item{display: block; left:216px;}


	</style>
<body>
		<ul>
			<li><a href="#main">首页</a></li>
			<li><a href="#video">视频教程</a></li>
			<li><a href="#community">社区问答</a></li>
			<li><a href="#">编程词典</a></li>
			<li><a href="">手册下载</a></li>
			<li><a href="">工具下载</a></li>
			<li><a href="">类库下载</a></li>
			<li><a href="">特色课程</a></li>
			<li><a href="">菜鸟课堂</a></li>
		</ul>



<div class="clear"></div>
	<div class="main">
<ul class="main_menu">

<li class="menu">
	<div>PHP开发</div>
	<div class="item">
		php教程
		php图文教程 php视频教程 php手册教程 php实战教程 其他机构教程 php原生手册 phpstudy工具使用视频教程

	</div>

</li>
<li class="menu">前端开发</li>
<li class="menu">服务端开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>


</ul>
</div>

</body>
</html>

批改老师：天蓬老师批改时间：2018-11-30 16:08:15
老师总结：清除浮动有多种方式,推荐使用伪元素还有, 如果使父级区块包住浮动元素呢?

导航栏的展示

热门词条