纯CSS弹出式菜单(兼容IE6)

最新推荐文章于 2017-04-17 09:47:00 发布

xuyf

最新推荐文章于 2017-04-17 09:47:00 发布

阅读量845

点赞数

分类专栏：网络及网页编程文章标签： ie css class border xhtml float

网络及网页编程专栏收录该内容

28 篇文章 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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS库吧弹出菜单</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.menu { width:750px; margin:0; margin:50px auto;} .menu ul { padding:0; margin:0; list-style-type: none;} .menu ul li { float:left; position:relative;} .menu ul li a{ display:block; text-align:center; text-decoration:none; width:104px; height:30px; line-height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; font-size:11px;} .menu ul li:hover a{ color:#fff; background:#0099FF;} .menu ul li ul { display: none;} .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px;} .menu li:hover ul li a { display:block; background:#FF9933; color:#000;} .menu li:hover ul li a:hover { background:#FF0033; color:#fff; }</style> </mce:style><style type="text/css" mce_bogus="1">table { border-collapse:collapse; margin:0; padding:0;} .menu ul li a.hide { display:none;} .menu ul li a:hover { color:#fff; background:#0099FF;} .menu li a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px;} .menu li a:hover ul li a { display:block; background:#FF9933; color:#000;} .menu li a:hover ul li a:hover { background:#FF0033; color:#fff;}</style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="#" mce_href="#" _fcksavedurl="#">首页</a>  <ul> <li><a href="#" mce_href="#" _fcksavedurl="#">CSS库吧</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> </ul>  </li> <li><a class="hide" href="#" mce_href="#" _fcksavedurl="#">CSS库吧</a>  <ul> <li><a href="#" mce_href="#" _fcksavedurl="#">CSS库吧</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> </ul>  </li> <li><a class="hide" href="#" mce_href="#" _fcksavedurl="#">CSS库吧</a>  <ul> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> </ul>  </li> <li><a class="hide" href="#" mce_href="#" _fcksavedurl="#">首页</a>  <ul> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> </ul>  </li> <li><a class="hide" href="#" mce_href="#" _fcksavedurl="#">首页</a>  <ul> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> </ul>  </li> <li><a class="hide" href="#" mce_href="#" _fcksavedurl="#">首页</a>  <ul> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> </ul>  </li> <li><a class="hide" href="#" mce_href="#" _fcksavedurl="#">首页</a>  <ul> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> <li><a href="#" mce_href="#" _fcksavedurl="#">公司介绍</a></li> </ul>  </li> </ul>  <div class="clear"> </div> </div> </body> </html>

运行效果如下：