css 定制Suckerfish下拉菜单

来源：互联网发布：我的淘宝怎么登陆编辑：程序博客网时间：2024/06/12 22:56

如下所示位动态显示的下拉列表
标记如下：

    <ul class="nav">            <li><a href="#">Home</a>            </li>            <li><a href="#">Products</a>                <ul>                    <li><a href="#">Silverback</a></li>                    <li><a href="#">Font Deck</a></li>                </ul>            </li>            <li><a href="#">Service</a>                <ul>                    <li><a href="#">Design</a></li>                    <li><a href="#">Development</a></li>                    <li><a href="#">Consulttancy</a></li>                </ul>            </li>            <!-- <li><a href="#">Contact Us</a></li> -->        </ul>

css样式如下

<style type="text/css">            ul.nav,ul.nav ul{                margin: 0;                padding: 0;                list-style-type: none;                float: left;                border: 0px solid #486B02;                background-color: #8BD400;            }            ul.nav li{                float: left;                width: 8em;                background-color: #8BD400;            }            ul.nav li ul {                width: 8em;                position: absolute;                left: -999em;            }            .nav li:hover ul{                left: auto;            }            ul.nav a{                display: block;                color: #2B3F00;                text-decoration: none;                padding: 0.3em 1em;                border-right: 1px solid #486B02;                border-left: 1px solid #E4FFD3;            }            ul.nav li li a{                border-top: 1px solid #E4FFD3;                border-bottom: 1px solid #486B02;                border-left: 0;                border-right: 0;            }            ul.nav li:last-child a{                border-right: 0;                border-bottom: 0;            }            ul a:hover, ul a:focus{                color: #E4FFD3;                background-color: #6DA203;            }        </style>

0 0