<div id="topMenu">            <ul>                <li><a href=http://www.mamicode.com/"#">Home</a></li>                <li><a href=http://www.mamicode.com/"#">PRODUCTS</a></li>                <li><a href=http://www.mamicode.com/"#">Contact</a></li>                <li><a href=http://www.mamicode.com/"#">Messages</a></li>                <li><a href=http://www.mamicode.com/"#">Lists</a></li>                <li><a href=http://www.mamicode.com/"#">Admin</a></li>            </ul>        </div>

<style>        #topMenu {            height: 30px;            width: 100%;            border-bottom: solid 2px #4cb6ea;            text-align: right;        }            #topMenu ul {                position: absolute;                right: 30px;                height: 30px;                line-height: 30px;            }            #topMenu a {                font-size: 16px;                font-weight: bold;                padding: 5px 15px 8px 15px;                border-top: solid 2px #4cb6ea;                border-left: solid 2px #4cb6ea;                border-right: solid 2px #4cb6ea;                border-top-left-radius: 5px;                border-top-right-radius: 5px;                background-color: #4cb6ea;                color: #fff;            }                #topMenu a:hover {                    color: #666;                    text-decoration: none;                    background-color: #fff;                }    </style>

<div class="fr" id="topbanner">                <ul>                    <li class=‘has-sub‘><a href=http://www.mamicode.com/"#">Contact Us</a>                        <ul>                            <li><a href=http://www.mamicode.com/"#">Send Email</a></li>                            <li><a href=http://www.mamicode.com/"#">Call Me</a></li>                        </ul>                    </li>                    <li><a href=http://www.mamicode.com/"#">My Category</a></li>                </ul>            </div>

<style>        #topbanner ul {            list-style: none;            margin: 0;            padding: 0;            display: block;        }            #topbanner ul:after,            #topbanner:after {                content: " ";                display: block;                font-size: 0;                height: 0;                clear: both;                visibility: hidden;            }            #topbanner ul li {                margin: 0;                padding: 0;                display: block;                position: relative;            }                #topbanner ul li a {                    text-decoration: none;                    display: block;                    margin: 0;                    -webkit-transition: color .2s ease;                    -moz-transition: color .2s ease;                    -ms-transition: color .2s ease;                    -o-transition: color .2s ease;                    transition: color .2s ease;                    -webkit-box-sizing: border-box;                    -moz-box-sizing: border-box;                    box-sizing: border-box;                }                #topbanner ul li ul {                    position: absolute;                    left: -9999px;                    top: auto;                }                    #topbanner ul li ul li {                        max-height: 0;                        position: absolute;                        -webkit-transition: max-height 0.4s ease-out;                        -moz-transition: max-height 0.4s ease-out;                        -ms-transition: max-height 0.4s ease-out;                        -o-transition: max-height 0.4s ease-out;                        transition: max-height 0.4s ease-out;                        background: #ffffff;                    }                        #topbanner ul li ul li.has-sub:after {                            display: block;                            position: absolute;                            content: "";                            height: 10px;                            width: 10px;                            border-radius: 5px;                            background: #000000;                            z-index: 1;                            top: 3px;                            right: 15px;                        }                        #topbanner ul li ul li.has-sub:before {                            display: block;                            position: absolute;                            content: "";                            height: 0;                            width: 0;                            border: 3px solid transparent;                            border-left-color: #ffffff;                            z-index: 2;                            top: 5px;                            right: 15px;                        }                        #topbanner ul li ul li a {                            font-size: 14px;                            text-transform: none;                            color: #000000;                            letter-spacing: 0;                            display: block;                            width: 120px;                            padding: 0px 10px 0px 10px;                        }                        #topbanner ul li ul li:hover > a,                        #topbanner ul li ul li.active > a {                            color: #4cb6ea;                        }                        #topbanner ul li ul li:hover:after,                        #topbanner ul li ul li.active:after {                            background: #4cb6ea;                        }                        #topbanner ul li ul li:hover > ul {                            left: 100%;                            top: 0;                        }                            #topbanner ul li ul li:hover > ul > li {                                max-height: 30px;                                position: relative;                            }        #topbanner > ul > li {            float: left;        }            #topbanner > ul > li:after {                content: "";                display: block;                position: absolute;                width: 100%;                height: 0;                top: 0;                z-index: 0;                background: #ffffff;                -webkit-transition: height .2s;                -moz-transition: height .2s;                -ms-transition: height .2s;                -o-transition: height .2s;                transition: height .2s;            }            #topbanner > ul > li.has-sub > a {                padding-right: 35px;            }                #topbanner > ul > li.has-sub > a:after {                    display: block;                    content: "";                    background: #ffffff;                    height: 12px;                    width: 12px;                    position: absolute;                    border-radius: 13px;                    right: 14px;                    top: 10px;                }                #topbanner > ul > li.has-sub > a:before {                    display: block;                    content: "";                    border: 4px solid transparent;                    border-top-color: #4cb6ea;                    z-index: 2;                    height: 0;                    width: 0;                    position: absolute;                    right: 16px;                    top: 15px;                }            #topbanner > ul > li > a {                color: #666;                padding: 0px 5px 0px 10px;                font-weight: 600;                letter-spacing: 1px;                text-transform: uppercase;                font-size: 14px;                z-index: 2;                position: relative;            }            #topbanner > ul > li:hover:after,            #topbanner > ul > li.active:after {                height: 100%;            }            #topbanner > ul > li:hover > a,            #topbanner > ul > li.active > a {                color: #000000;            }                #topbanner > ul > li:hover > a:after,                #topbanner > ul > li.active > a:after {                    background: #000000;                }                #topbanner > ul > li:hover > a:before,                #topbanner > ul > li.active > a:before {                    border-top-color: #ffffff;                }            #topbanner > ul > li:hover > ul {                left: 0;            }                #topbanner > ul > li:hover > ul > li {                    max-height: 72px;                    position: relative;                }            #topbanner > ul > li > a {                display: block;            }        #topbanner > ul > li {            width: auto;        }            #topbanner > ul > li > ul {                width: 170px;                display: block;            }                #topbanner > ul > li > ul > li {                    width: 170px;                    display: block;                }        @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {            #topbanner > ul {                max-height: 0;                overflow: hidden;                -webkit-transition: max-height 0.35s ease-out;                -moz-transition: max-height 0.35s ease-out;                -ms-transition: max-height 0.35s ease-out;                -o-transition: max-height 0.35s ease-out;                transition: max-height 0.35s ease-out;            }                #topbanner > ul > li > ul {                    width: 100%;                    display: block;                }                    #topbanner > ul > li > ul > li {                        width: 100%;                        display: block;                    }                        #topbanner > ul > li > ul > li > a {                            width: 100%;                            display: block;                        }            #topbanner ul li ul li a {                width: 100%;            }            #topbanner ul {                width: 100%;            }                #topbanner ul > li {                    float: none;                    width: 100%;                }                #topbanner ul li a {                    -webkit-box-sizing: border-box;                    -moz-box-sizing: border-box;                    box-sizing: border-box;                    width: 100%;                    padding: 12px 20px;                }                #topbanner ul > li:after {                    display: none;                }                #topbanner ul li.has-sub > a:after,                #topbanner ul li.has-sub > a:before,                #topbanner ul li ul li.has-sub:after,                #topbanner ul li ul li.has-sub:before {                    display: none;                }                #topbanner ul li ul,                #topbanner ul li ul li ul,                #topbanner ul li ul li:hover > ul,                #topbanner.align-right ul li ul,                #topbanner.align-right ul li ul li ul,                #topbanner.align-right ul li ul li:hover > ul {                    left: 0;                    position: relative;                    right: auto;                }                    #topbanner ul li ul li,                    #topbanner ul li:hover > ul > li {                        max-height: 999px;                        position: relative;                        background: none;                    }                        #topbanner ul li ul li a {                            padding: 8px 20px 8px 35px;                            color: #ffffff;                        }                        #topbanner ul li ul li:hover > a {                            color: #000000;                        }        }    </style>