HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Home</a></li> <li>
<a href="#">About Us</a></li> <li>
<a href="#">contact US</a></li>
<li> <a href="#">Social<img src="#"/></a>
<ul>
<li><a href="#">YouTube</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Google+</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Home</a></li> <li>
<a href="#">About Us</a></li> <li>
<a href="#">contact US</a></li>
<li> <a href="#">Social<img src="#"/></a>
<ul>
<li><a href="#">YouTube</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Google+</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS CODE:
@charset "utf-8";
/* CSS Document */
body{
padding:0px;
margin:0px;
overflow-y:scroll;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
#nav
{
background-color:#09F;
}
#nav_wrapper
{
width:960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type:none;
padding:0px;
margin:0px;
position:relative;
}
#nav ul li{
display:inline-block;
}
#nav ul li:hover{
background-color:#306;
}
#nav ul li img
{
vertical-align:middle;
padding-left:10px;
}
#nav ul li a,visited
{
color:#C06;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover
{
color:#FFF;
text-decoration:none;
}
#nav ul li:hover ul
{
display:block;
}
#nav ul ul
{
display:none;
position:absolute;
background-color:#90C;
border:#C66 solid 2px;
border-top:0;
margin-left:-5px;
min-width:200px;
}
#nav ul ul li{
display:block;
}
#nav ul ul li a,visited
{
color:#FF6;
}
#nav ul ul li a:hover
{
color:#9C3;
}
