一款灰色风格的Css滑出菜单
浏览数：99 /
时间：2015年06月09日
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
