一个纯CSS写的下拉菜单,代码比较复杂。

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>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.