div+css 设计下拉

css样式

 <style type="text/css">
        <!--
        /* www.divcss5.com CSS下拉菜单实例 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            font-family: arial, 宋体, serif;
            font-size: 12px;
        }


        #nav {
            line-height: 24px;
            list-style-type: none;
            background: #666;
        }

            #nav a {
                display: block;
                width: 150px;
                text-align: center;
            }

                #nav a:link {
                    color: #666;
                    text-decoration: none;
                }

                #nav a:visited {
                    color: #666;
                    text-decoration: none;
                }

                #nav a:hover {
                    color: #FFF;
                    text-decoration: none;
                    font-weight: bold;
                }

            #nav li {
                float: left;
                width: 150px;
                background: #CCC;
            }

                #nav li a:hover {
                    background: #999;
                }

                #nav li ul {
                    line-height: 27px;
                    list-style-type: none;
                    text-align: left;
                    left: -999em;
                    width: 150px;
                    position: absolute;
                }

                    #nav li ul li {
                        height: 30px;
                        line-height: 30px;
                        float: left;
                        width: 150px;
                        background: #EFEFEF;
                    }

                    #nav li ul a {
                        display: block;
                        width: 126px;
                        text-align: left;
                        padding-left: 24px;
                        overflow: hidden;
                    }

                        #nav li ul a:link {
                            color: #666;
                            text-decoration: none;
                        }

                        #nav li ul a:visited {
                            color: #666;
                            text-decoration: none;
                        }

                        #nav li ul a:hover {
                            color: #F3F3F3;
                            text-decoration: none;
                            font-weight: normal;
                            background: #C00;
                        }

                #nav li:hover ul {
                    left: auto;
                }

                #nav li.sfhover ul {
                    left: auto;
                }

        #content {
            clear: left;
        }
 
    </style>

html 

<ul id="nav">
                                    <li>
                                        <a href="#" id="colorShow" style="height: 30px; line-height: 30px">卡券颜色</a>
                                        <ul id="colorList" runat="server">
                                            <li><a href="#" style="background-color: red" onclick="saveColorID('red')">ff</a></li>
                                            <li><a href="#" style="background-color: black" onclick="saveColorID('black')">ff</a></li>
                                            <li><a href="#" style="background-color: blue" onclick="saveColorID('blue')">ff</a></li>
                                            <li><a href="#" style="background-color: white" onclick="saveColorID('white')">ff</a></li>
                                            <li><a href="#" style="background-color: green" onclick="saveColorID('green')">ff</a></li>
                                            <li><a href="#" style="background-color: gray" onclick="saveColorID('gray')">ff</a></li>
                                        </ul>
                                    </li>
                                </ul>