一个纯CSS写的下拉菜单,代码比较复杂。
纯CSS下拉菜单效果图
CSS:
/*整体设置*/ .navigation { margin:0; padding:0; width:610px; list-style-type:none; font:12px Arial; float:left; } .navigation li { float:left; padding:0; margin:0 10px 0 0; _margin:0 2px 0 0; width:150px; } /* 设置选单区块*/ .navigation li dl { width:150px;/*ie6*/ margin:0; padding:0; background-color:#EFF7FF; border:solid 2px #96C2F1; } .navigation li dt a , .navigation li dd a{ display:block;} /* 设置主选单dt */ .navigation li dt { margin:0; padding: 5px; text-align:center; background-color:#EFF7FF; font-size: 12px; font-weight: bold; height:15px; overflow:hidden; } .navigation li dt a ,.navigation li dt a:visited { display:block; color:#333; text-decoration:none; } /* 设置子选单dd */ .navigation li dd { margin:0; padding:0; color: #333; background-color:#F0FBEB; border-bottom:dotted 1px #96C2F1; } .navigation li dd.last { border-bottom:0; } .navigation li dd a, .navigation li dd a:visited { display:block; color:#333; text-decoration:none; padding:4px 5px 4px 20px; } /*隐藏子选单*/ .navigation li dd { display:none;} /* 滑鼠滑入显示子选单 */ .navigation li:hover dd, .navigation li a:hover dd { display:block;} /*ie6 hack*/ .navigation li:hover,.navigation li a:hover { border:0;} .navigation table { border-collapse:collapse; padding:0; text-align:left; }
HTML:
<ul> <li> <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> <dl> <dt><a href="http://www.ibloglife.com">活着的博客</a></dt> <dd><a href="#">列表1</a></dd> <dd><a href="#">列表2</a></dd> <dd><a href="#">列表3</a></dd> <dd><a href="#">列表4</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> <dl> <dt><a href="http://www.ibloglife.com/archives/category/computer-internet/html">html</a></dt> <dd><a href="#">列表1</a></dd> <dd><a href="#">列表2</a></dd> </dl> </li> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <li> <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> <dl> <dt><a href="http://www.ibloglife.com/archives/category/computer-internet/css">css</a></dt> <dd><a href="#">列表1</a></dd> <dd><a href="#">列表2</a></dd> <dd><a href="#">列表3</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul>
评论