纯CSS菜单

来源：互联网发布：linux中录入历史字符编辑：程序博客网时间：2024/05/16 11:55
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"><head><style>html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,form,th,td {    font-size: 12px;    margin: 0;    padding: 0;}li {    list-style: none outside none;}a {    cursor: pointer;    text-decoration: none;}#dymenu .root li {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background: none repeat scroll 0 0 #EEEEEE;    border-color: #FFFFFF;    border-image: none;    border-style: solid;    border-width: 1px 1px 0 0;    position: relative;}#dymenu .root li li {    border-width: 1px 0 0 1px;}#dymenu .root a {    background: none repeat scroll 0 0 #EEEEEE;    color: #000000;    display: block;    padding: 0 10px;    vertical-align: top;}#dymenu .root h4 {    background: none repeat scroll 0 0 #EEEEEE;    color: #000000;    cursor: pointer;    font-weight: normal;    padding: 0 10px;}#dymenu .root a:hover {    background: none repeat scroll 0 0 #DDDDDD;    color: #333333;}#dymenu .root li:hover > h4 {    background: none repeat scroll 0 0 #DDDDDD;    color: #333333;}#dymenu .root ul, #dymenu a:hover a ul, #dymenu a:hover a:hover a ul, #dymenu a:hover a:hover a:hover a ul, #dymenu a:hover a:hover a:hover a:hover a ul, #dymenu a:hover a:hover a:hover a:hover a:hover a ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul {    background: none repeat scroll 0 0 #EEEEEE;    display: none;    margin: -1px 0 0;}#dymenu a:hover ul, #dymenu a:hover a:hover ul, #dymenu a:hover a:hover a:hover ul, #dymenu a:hover a:hover a:hover a:hover ul, #dymenu a:hover a:hover a:hover a:hover a:hover ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul, #dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul {    display: block;    left: 99px;    position: absolute;    top: 0;    width: 100px;}#dymenu .root li:hover > ul {    background: none repeat scroll 0 0 #EEEEEE;    display: block;    left: 99px;    margin-top: -1px;    position: absolute;    top: 0;    width: 100px;}</style></head><body>    <div id="dymenu" style="line-height: 25px;width: 100px">        <ul class="root">            <li>                <h4>1-1</h4>                <ul>                    <li>                        <h4>2-1</h4>                        <ul>                            <li><a href="">3-1</a>                            </li>                            <li><a href="">3-2</a>                            </li>                            <li><a href="">3-3</a>                            </li>                        </ul>                    </li>                    <li><a href="">2-2</a></li>                </ul>            </li>        </ul>    </div></body></html>
0 0