Dropdown Menu

by Naresh

HTML

<!-- Header -->
   <div class="header">
      <div class="sitename"><a href="#">Website Name</a></div>
      <!-- Main Menu -->
      <div id="menu"> 
         <ul>
            <li><a href="#">Tab 1</a>
            <!-- <div class="arrow-down"></div> -->
               <ul> <!-- Sub Menu -->
                  <li><a href="#">Sub Tab 1</a></li>        
                  <li><a href="#">Sub Tab 2</a></li>
                  <li><a href="#">Sub Tab 3</a>
                     <ul> <!-- Sub Sub Menu -->
                        <li><a href="#">Sub Sub Tab 1</a></li> 
                        <li><a href="#">Sub Sub Tab 2</a></li>
                        <li><a href="#">Sub Sub Tab 3</a></li>
                        <li><a href="#">Sub Sub Tab 4</a></li>
                        <li><a href="#">Sub Sub Tab 5</a></li>
                     </ul>             
                  </li>
                  <li><a href="#">Sub Tab 4</a></li>
                  <li><a href="#">Sub Tab 5</a></li>
               </ul> 
            </li> 
            <li><a href="#">Tab 2</a></li>
            <li><a href="#">Tab 3</a></li>
            <li><a href="#">Tab 4</a></li>
            <li><a href="#">Tab 5</a></li>
            <li><a href="#">Tab 6</a></li>
         </ul>
      </div>
   <!-- Slider Image -->
   </div>
   <div id="slider">
      <img src = "http://www.sgbrandreach.com/wp-content/themes/food/img/cms_website_slider_img.png" />
   </div>

CSS

* {
	margin: 0;
	padding: 0;
}
.header {
	width: 100%;
	height: 50px;
	background-color: #0066cc;
}
.sitename {
	font-size: 25px;
	line-height: 50px;
	margin: 0px 50px;
	display: inline-block;
	color: white;
	font-family: Helvetica, sans-serif;
    float: left; 
}
.sitename a {
	text-decoration: none;
	color: white;
}
#menu ul {
	list-style: none;
	font-size: 15px;
	font-family: helvetica;
}
#menu ul li {
	float: left;
	position: relative;
	width: 150px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
#menu ul li a {
	text-decoration: none;
	color: white;
	display: block;
}
#menu ul li ul a {
	color: black;;
}
#menu ul li a:hover {
	background-color: #4CAF50;
	color: white;
}
#menu ul ul {
	position: absolute;
	display: none;
	background: rgba(255,255,255,.5);
}
#menu ul li:hover > ul {
	display: block;
}
#menu ul ul ul {
	margin-left: 150px;
	margin-top: -50px; 
	background: rgba(255,255,255,.5);
}
#slider img {
	width: 100%;
}