Navigation menu w/ logo on the left

Navigation menu w/ logo on the left

by Matthew Dewhurst

HTML

<div id="nav">
    
    <div id="nav-wrapper">
        
        <div id="nav-left">
            <img src="https://yt3.ggpht.com/-sa7F656qXo0/AAAAAAAAAAI/AAAAAAAAAAA/jzG_AM4hOW8/s100-c-k-no/photo.jpg" />
        </div><!-- Nav left end -->
        
        <div id="nav-right">
            <ul>
                <li><a href="#">right-item#3</a></li>
                <li><a href="#">right-item #2</a></li>
                <li><a href="#">right-item #3</a></li>
                <li><a href="#">right-item #4</a></li>
            </ul>
        </div><!-- Nav right end -->
        
    </div><!-- Nav wrapper end -->
    
</div><!-- Nan end -->

CSS

body{ padding: 0; margin: 0; font-family: Arial; font-size: 16px; }

#nav{ background-color: #333; overflow: hidden; }
#nav-wrapper{ width: 960px; margin: 0 auto; text-align: left; }

#nav-left{ float: left; }
#nav-left img{ width: 45px; }
#nav-right{ float: right; }

#nav ul{ list-style-type: none; padding: 0; margin: 0; position: relative; }
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #444; }
#nav ul li a,visited{ display: block; padding: 15px 10px 15px 10px; color: #FFF; text-decoration: none; }

#nav ul li:hover ul{ display: block; }
#nav ul ul{ display: none; position: absolute; top: 0; margin: 30px 0 0 0; background-color: #444; z-index: 9999; }