首页 > 代码库 > 一款灰色风格的Css滑出菜单

一款灰色风格的Css滑出菜单

2024-07-27 02:35:44   224人阅读

<!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:auto;}/*弹出菜单*/td{border:1px solid #cceeff;/* 单元格样式 */}#PopUp ul{list-style:none;font-size:12px;text-decoration:none;}#PopUp li{float:left;margin-right:10px;padding:0px;background:#ddd;border:1px solid #ffeecc;}#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 solid #cceeff;}#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="http://www.sjz-yoga.com">滑过我<span><table><tr><td><dl><dt><a href="http://www.sjz-yoga.com">menu1</a></dt><dt><a href="http://www.sjz-yoga.com">menu2</a></dt><dt><a href="http://www.sjz-yoga.com">menu3</a></dt><dt><a href="http://www.sjz-yoga.com">menu4</a></dt><dt><a href="http://www.sjz-yoga.com">menu5</a></dt><dt><a href="http://www.sjz-yoga.com">menu6</a></dt><dt><a href="http://www.sjz-yoga.com">menu1</a></dt><dt><a href="http://www.sjz-yoga.com">menu2</a></dt><dt><a href="http://www.sjz-yoga.com">menu3</a></dt><dt><a href="http://www.sjz-yoga.com">menu4</a></dt><dt><a href="http://www.sjz-yoga.com">menu5</a></dt><dt><a href="http://www.sjz-yoga.com">menu6</a></dt></dl></td></tr></table></span></a></li><li><a href="http://www.sjz-yoga.com">滑过我<span><table><tr><td><dl><dt><a href="http://www.sjz-yoga.com">menu1</a></dt><dt><a href="http://www.sjz-yoga.com">menu2</a></dt><dt><a href="http://www.sjz-yoga.com">menu3</a></dt><dt><a href="http://www.sjz-yoga.com">menu4</a></dt><dt><a href="http://www.sjz-yoga.com">menu5</a></dt><dt><a href="http://www.sjz-yoga.com">menu6</a></dt></dl></td></tr></table></span></a></li><li><a href="http://www.sjz-yoga.com">滑过我<span><table><tr><td><dl><dt><a href="http://www.sjz-yoga.com">menu1</a></dt><dt><a href="http://www.sjz-yoga.com">menu2</a></dt><dt><a href="http://www.sjz-yoga.com">menu3</a></dt><dt><a href="http://www.sjz-yoga.com">menu4</a></dt><dt><a href="http://www.sjz-yoga.com">menu5</a></dt><dt><a href="http://www.sjz-yoga.com">menu6</a></dt></dl></td></tr></table></span></a></li></body></html>

 

一款灰色风格的Css滑出菜单


联系
我们