Customized dropdown menu for "JackDaffernGaming HD"

by Matthew Dewhurst

HTML

<nav>
    <div id="wrapper">
        <div id="nav-left">
            <ul>
                <li><a href="#">item #1</a></li><li>
                <a href="#">item #2</a></li><li>
                <a href="#">dropdown #1</a>
                    <ul>
                        <li><a href="#">dropdown #1 item #1</a></li>
                        <li><a href="#">dropdown #1 item #2</a></li>
                        <li><a href="#">dropdown #1 item #3</a></li>
                        <li><a href="#">dropdown #1 item #4</a></li>
                    </ul>
                </li><li>
                <a href="#">item #3</a></li><li>
                <a href="#">item #4</a></li>
            </ul>
        </div><!-- nav-left end -->
        <div id="nav-right">
            <ul>
                <li><a href="#">Sign In</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </div><!-- nav-right end -->
    </div><!-- wrapper end -->
</nav><!-- nav end -->

CSS

body{ overflow-y: scroll; padding: 0; margin: 0; font-family: Arial; }

nav{ background-color: #222; width: 100%; overflow: hidden; }
nav ul{ list-style-type: none; padding: 0; margin: 0; }
nav ul li{ display: inline-block; }

#wrapper{ width: 800px; margin: 0 auto; }

#nav-left{ float: left; }
#nav-right{ float: right; }

#nav-left ul li{ vertical-align: middle; }
#nav-left ul li a,visited{ color: #FFF; text-decoration: none; display: block; padding: 22px 10px 22px 10px; }
#nav-left ul li a:hover{ color: #457585; background-color: #333; }

#nav-left ul li:hover ul{ display: block; }
#nav-left ul ul{ display: none; position: absolute; background-color: #333; }
#nav-left ul ul li{ display: block; }

#nav-right ul li{ margin: 10px 5px 10px 5px; text-transform: uppercase; font-weight: bold; }
#nav-right ul li a,visited{ color: #333; background-color: #FFF; text-decoration: none; display: block; padding: 10px; border-radius: 4px; border: 2px solid #FFF; }
#nav-right ul li a:hover{ background-color: #457585; color: #FFF; }