Try just copy/pasting this entire snippet into a new .html document and look at these changes highlighted in red do for you -
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="http://yas.clearcarbontrading.com/" />
<title>Untitled Document</title>
<style type="text/css">
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
input, textarea {border:0; padding:0; margin:0; outline: 0;}
iframe {border:0; margin:0; padding:0;}
input, textarea, select {margin:0; padding:0px;}
html, body {
width: 100%;
padding: 0;
margin: 0
}
body {
font: 14px/25px Arial, Helvetica, sans-serif;
color: #000000;
min-width: 960px;
background: #000000
}
.ic {
border: 0;
float: right;
background: #fff;
color: #f00;
width: 50%;
line-height: 10px;
font-size: 10px;
margin: -220% 0 0 0;
overflow: hidden;
padding: 0
}
.main {
width: 100%;
background: url(../images/main.jpg) center 0 repeat;
border-top: #000000 5px solid
}
.social-icons {
overflow: hidden;
text-align: right;
padding: 20px 30px 13px 0
}
.social-icons span {
display: inline-block;
font-size: 13px;
line-height: 17px;
color: #fff;
font-weight: bold;
margin: 3px 14px 0 0
}
.social-icons a {
display: inline-block;
width: 23px;
height: 23px;
float: right
}
.icon-1 { background: url(../images/icon-1.png) 0 0 no-repeat }
.icon-2 {
background: url(../images/icon-2.png) 0 0 no-repeat;
margin-left: 7px
}
.icon-3 {
background: url(../images/icon-3.png) 0 0 no-repeat;
margin-left: 7px
}
.social-icons a:hover { background-color: #000 }
nav {
z-index: 100;
border-radius: 12px;
background: #ebebec;
margin: 22px 6px 0 6px;
padding: 4px
}
nav>div {
background: url(../images/nav.jpg) 0 0 repeat-x #55b7c8;
border-radius: 12px 8px 8px 12px
}
ul.menu {
margin: 0 1px 0 0;
border-right: #7acad7 1px solid;
display: inline-block;
float: left
}
ul.menu li {
float: left;
line-height: 17px;
margin: 0 0 0 0;
background: url(../images/transp.png) 0 0 repeat;
border-right: #53b2c3 1px solid;
border-left: #82ceda 1px solid
}
ul.menu li a {
font-size: 13px;
line-height: 17px;
color: #fff;
font-weight: bold;
display: block;
padding: 23px 28px 24px 28px
}
ul.menu li.home-page {
display: inline-block;
background: url(../images/transp.png) 0 0 repeat;
border-radius: 8px 0 0 8px;
border: none !important
}
ul.menu li:hover, ul.menu li.current {
background: url(../images/current.jpg) 0 0 repeat-x #000000;
border-right: #000000 1px solid;
border-left: #000000 1px solid
}
ul.menu li.home-page a { padding: 21px 22px 24px 23px !important }
ul.menu li.home-page span {
background: url(../images/home-page-img.png) 0 0 no-repeat;
width: 19px;
height: 19px;
display: block
}
ul.menu li {position: relative;}
ul.menu ul {
position: absolute;
top: 0;
left: -1200px;
}
ul.menu li:hover ul {left: 0;}
</style>
</head>
<body>
<div class="main">
<nav class="box-shadow">
<div>
<ul class="menu">
<li class="home-page current"><a href="index.html"><span></span></a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="clients.html">Clients</a>
<ul>
<li><a href="#">Client 1</a></li>
<li><a href="#">Client 2</a></li>
<li><a href="#">Client 3</a></li>
<li><a href="#">Client 4</a></li>
</ul>
</li> <li><a href="contacts.html">Contacts</a></li>
</ul>
<div class="social-icons">
<span>Follow us:</span>
<a href="#" class="icon-3"></a>
<a href="#" class="icon-2"></a>
<a href="#" class="icon-1"></a>
</div>
<div class="clear"></div>
</div>
</nav>
<!--end .main--></div>
</body>
</html>