纯css实现二级下拉菜单

最新推荐文章于 2024-06-18 16:20:24 发布

卤蛋哥

最新推荐文章于 2024-06-18 16:20:24 发布

阅读量755

点赞数

分类专栏： web前端文章标签： css xhtml div 浏览器 class html

本文链接：https://blog.csdn.net/allenchang1987/article/details/6824714

版权

web前端专栏收录该内容

7 篇文章 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">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<head>
		<style type="text/css"> 
		ul {
			  position: relative;
		      list-style:none;
  			  margin: 0px;
  			  padding: 0px;
			}
		ul li {	
			display: inline;
			float: left;
		 	width:100px;
		 	height:30px;
			}
	 	ul li li {  height:25px;}
		ul li a{display: block;}
		ul li ul{ display:none; }
		ul li:hover ul {display: block;}
 	</style>
		</head>
<body>
		<div id="container">
		<div id="nav">
			<ul>
  <li><a href="#">父菜单一</a></li>
  <li><a href="#">父菜单二</a>
    <ul>
      <li><a href="#">子菜单一</a></li><li><a href="#">子菜单二</a></li><li><a href="#">子菜单三</a></li>
    </ul>
  </li>
  <li><a href="#">父菜单三</a></li>
  <li><a href="#">父菜单四</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a></li>
      <li><a href="#">子菜单三</a></li>
    </ul>
  </li>
  <li><a href="#">菜单五</a></li>
</ul>
		</div>
		  <br/>
		 <br/>
		 <br/>
		 <div class="clear"></div>
		 <div id="main"  >Hello World!!!!!!!!!!!!!!!</div>
	</div>
</body>

注意此方法不适用于IE6,如果有需要，可以查询本博客另一篇文章

Jquery+CSS完美实现二级下拉菜单(兼容所有浏览器)

卤蛋哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css实现二级下拉菜单

ul { position: relative; list-style:none; margin: 0px; padding: 0px; } ul li { display: inline; float
复制链接

扫一扫

专栏目录