simple and diffrent nav color

by Gulam Jilani

HTML

<div class="main">
    <div class="wrap">
            <header>
                <div class="logo"></div>
                <nav>
                    <ul>
                        <li><a href="#" class="home">home</a>
                        	<ul>
                            
                            		<li><a href="#" class="contact_us">contact us</a></li>
                                    <li><a href="#" class="contact_us">contact us</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="contact_us">contact us</a></li>
                        <li><a href="#" class="portfolio">portfolio</a></li>
                        <li><a href="#">home</a></li>
                        <li><a href="#">home</a></li>
                        <li><a href="#" class="register">register</a></li>
                    </ul>
                </nav>
            </header>
            
            
            
            
        </div>
    </div>

CSS

.main{width:100%; float:left; padding:10px;}
	.wrap{width:100%; margin:0 auto; max-width:789px;}
	header{width:100%; float:left; padding:10px;}
	.logo{width:30%; float:left; height:40px; background-color:#333;}
	nav{width:65%; float:left; margin-left:5%; background:#666;}
	
	nav ul{margin:0; padding:0;}
	nav ul li{float:left; z-index:999; margin:0; padding:0; list-style:none; position:relative;} 
	nav li:hover ul {display:block;}
	nav li ul,nav li ul ul{display:none; position:absolute; left:0; top:100%;}
	
	nav li ul li{ float:none; top:100%; left:0; white-space:nowrap; background:#F00; }
		nav li ul li:hover{color:#FFF; border:1px solid #000;}
	 nav li ul ul a{float:none; display:block; white-space:nowrap; top:100%; left:0;}
	
	
	
	
	
	nav ul li a{text-decoration:none; font:Verdana, Geneva, sans-serif; font-size:18px; color:rgba(0,0,0,0.6); padding:10px; display:block;}
	.home{background:none;}
	nav ul li a.home:hover{ text-decoration:none; background:#930; color:#FFF;}
	.contact_us{background:none;}
	nav ul li a.contact_us:hover{ text-decoration:none; background:#960; color:#FFF;}
	.portfolio{background:none;}
	nav ul li a.portfolio:hover{ text-decoration:none; background:#903; color:#FFF;}
	nav ul li a:hover{text-decoration:underline; background:#936; color:#FFF;}
	.register{background:none;}
	nav ul li a.register:hover{ text-decoration:none; background:#90C; color:#FFF;}