Css Study - 横向MENU

http://cssmenumaker.com/menu/tabbed-chrome-and-blue

HTML

<div id="topMenu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">PRODUCTS</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Messages</a></li>
                <li><a href="#">Lists</a></li>
                <li><a href="#">Admin</a></li>
            </ul>
        </div>

CSS

<style>
        #topMenu {
            height: 30px;
            width: %;
            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: #;
                    text-decoration: none;
                    background-color: #fff;
                }
    </style>

dropdown menu

HTML

<div id="top_banner">
            <div id="nav">
                <ul>
                    <li><a href="#" class="has_sub">My System</a>
                        <ul>
                            <li><a href="#">Change Password</a></li>
                            <li><a href="#">My Profile</a></li>
                        </ul>
                    </li>
                    <li><a href=</a></li>
                    <li><a href=</a></li>
                    <li><a href=</a></li>
                </ul>
            </div>
        </div>

CSS

<style>
        #top_banner {
            background-color: #F7F7F7;
            width: %;
            padding: 0px;
            margin: 0px;
            height: 35px;
        }

        #nav {
            position: absolute;
            right: 10px;
            margin: 0px;
            padding: 0px;
        }

            #nav ul ul {
                display: none;
            }

            #nav ul li:hover > ul {
                display: block;
            }

            #nav ul {
                background: #F7F7F7;
                padding:  20px;
                list-style: none;
                position: relative;
                display: inline-table;
                margin: 0px;
            }

                #nav ul:after {
                    content: "";
                    clear: both;
                    display: block;
                }

                #nav ul li {
                    float: left;
                }

                    #nav ul li:hover {
                        background: #b8b5b5;
                    }

                        #nav ul li:hover a {
                            color: #fff;
                        }

                    #nav ul li a {
                        display: block;
                        padding: 8px 20px 9px 20px;
                        color: #;
                        text-decoration: none;
                    }

                        #nav ul li a.has_sub {
                            background: url("icon_arrow_bottom.png") no-repeat right center;
                            background-position-x: 98px;
                        }

                #nav ul ul {
                    background: #b8b5b5;
                    padding: ;
                    position: absolute;
                    top: %;
                }

                    #nav ul ul li {
                        float: none;
                        border-top: 1px solid #ccc;
                        position: relative;
                        text-align: left;
                    }

                        #nav ul ul li a {
                            padding: 8px 20px 9px 20px;
                            color: #fff;
                        }

                            #nav ul ul li a:hover {
                                background: #9f9b9b;
                            }

                    #nav ul ul ul {
                        position: absolute;
                        left: %;
                        top: ;
                    }
    </style>