纯CSS下拉菜单(纵向)
上一篇 / 下一篇 2008-01-04 08:42:27 / 天气: 晴朗 / 心情: 高兴 / 个人分类：Web 2.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=gb2312" />
<title>Css实验室</title>
<style. type="text/css">
<!--
div{widht:100px;height:200px;}
/*弹出菜单*/
td{border:0px;}
#PopUp ul{list-style.:none;font-size:12px; text-decoration:none;}
#PopUp li{float:left;margin-right:1px;padding:0px; background:#ddd;}
#PopUp li a{line-height:30px;width:100px;display:block;text-align:center;text-decoration:none;}
#PopUp li a:hover{position:relative;}
#PopUp li span{display:none; border:0px;}
#PopUp li a:hover span{display:block; position:absolute;top:27px;left:-3px;}
#PopUp li:hover,#PopUp li a:hover span,#PopUp li a:hover dt{}
#PopUp dt{background:none;}
#PopUp li a:hover dt a{float:left;background:#ddd;margin-top:1px;}
#PopUp li a:hover,#PopUp li a:hover dt a:hover{background:#ff6600;}
-->
</style>
</head>
<body>
<div id="PopUp">
<h2>弹出菜单</h2>
<ul>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css实验室</title>
<style. type="text/css">
<!--
div{widht:100px;height:200px;}
/*弹出菜单*/
td{border:0px;}
#PopUp ul{list-style.:none;font-size:12px; text-decoration:none;}
#PopUp li{float:left;margin-right:1px;padding:0px; background:#ddd;}
#PopUp li a{line-height:30px;width:100px;display:block;text-align:center;text-decoration:none;}
#PopUp li a:hover{position:relative;}
#PopUp li span{display:none; border:0px;}
#PopUp li a:hover span{display:block; position:absolute;top:27px;left:-3px;}
#PopUp li:hover,#PopUp li a:hover span,#PopUp li a:hover dt{}
#PopUp dt{background:none;}
#PopUp li a:hover dt a{float:left;background:#ddd;margin-top:1px;}
#PopUp li a:hover,#PopUp li a:hover dt a:hover{background:#ff6600;}
-->
</style>
</head>
<body>
<div id="PopUp">
<h2>弹出菜单</h2>
<ul>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
</ul>
</div>
</body>
</html>
相关阅读:
- 纯CSS下拉菜单(横向) (xtao, 2008-1-04)
- DIV+CSS仿网易的滑动门技术 (xtao, 2008-1-05)
- CSS三列布局,左侧固定,右侧两列等宽,且宽度随浏览器变化 (xtao, 2008-1-07)
- CSS菜单－－下拉菜单 (xtao, 2008-1-14)