menu bar

by mikeys4u

HTML

<div id="header">
    <div id="nav">
        <ul>
            
            <li><select id="test" name="mydropdown">
            <option value="one">
            Clients
            </option>
            <option value="two">
            Two
            </option>
            <option value="three">
            Three
            </option>
            </select>
            </li>
              <li><select id="test" name="mydropdown">
            <option value="one">
            Tags
            </option>
            <option value="two">
            Two
            </option>
            <option value="three">
            Three
            </option>
            </select>
            </li>
            
            <li> <a href="#">Menu1</a>

                <ul>
                    <li><a href="#"></a>submenu
                        <ul>
                            <li><a href="#">Business Choice</a>
                            </li>
                            <li><a href="#">Insurance Factory</a>
                            </li>
                            <li><a href="#">Wixted</a>
                            </li>
                            <li><a href="#">sub sub menu</a>
                            </li>
                        </ul>
                    </li>
                    <li>submenu</li>
                    <li>submenu</li>
                    <li>submenu</li>
                    <li>submenu</li>
                </ul>
            </li>
            <li> <a href="#">Menu2</a>

            </li>
            <li> <a href="#">Menu3</a>

                <ul>
                    <li>submenu</li>
                    <li>submenu</li>
                    <li><a href="#"></a>submenu
                        <ul>
                            <li><a href="#">sub sub menu</a>
                            </li>
                            <li><a href="#">sub sub menu</a>
                            </li>
                            <li><a href="#">sub sub menu</a>
         ...

CSS

ul, li {
        margin:0;
        padding:0;
        list-style:none;
        text-decoration:none;
        color:#fff
    }
    a {
        text-decoration:none;
        color:#fff
    }
    #nav ul {
        width:100%;
    }
    #nav ul li {
        float:left;
        padding:0 15px;
        line-height:40px;
    }
    body {
        overflow: hidden;
    }
    #header {
        background: none repeat scroll 0 0 #8BC53F;
        box-shadow: 1px 2px 3px #000;
        float: left;
        height: 50px;
        width: 87%;
        cursor: pointer;
    }
    #nav ul li {
        float: left;
        line-height: 51px;
        padding: 0 15px;
    }
    #nav ul > li:hover {
        background-color: #000;
    }
    #nav ul li > ul {
        background-color: #000;
        display: none;
        position: absolute;
        top: 59px;
        width: 150px;
    }
    #nav ul li:hover > ul {
        display:block
    }
    #nav ul li > ul > li {
        background: none repeat scroll 0 0 #8BC53F;
        border-bottom: 1px solid;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: center;
        text-transform: capitalize;
        width: 100%;
    }
    #nav ul li > ul > li > ul {
        background: none repeat scroll 0 0 #8BC53F;
        display: none;
        left: 150px;
        position: absolute;
        text-align: center;
        top: 0;
    }
    #nav ul li > ul > li:hover ul {
        display:block
    }
    #nav ul li > ul > li > ul > li {
        background: none repeat scroll 0 0 #8BC53F;
        color: #000;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
    }