Hi friend,
Try this code .
CSS:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "arial", verdana, sans serif;
background-color: #ccc;
overflow: auto;
border: 0px;
}
#global {
margin: 0px auto;
text-align: center;
min-width: 770px;
width: 902px;
}
#header {
height: 100px;
width: 900px;
border: 1px solid #414142;
background: #fff url("slogan.gif") no-repeat scroll center right;
}
img.displayed {
display: block;
text-align: left;
margin: 6px auto 0px 15px;
}
.nav {
height: 35px;
background: url(dropline_0.gif) repeat-x;
position: relative;
font: bold 12px arial, verdana, sans-serif;
width: 900px;
border-left-style: solid;
border-right-style: solid;
border-color: #414142;
border-width: 1px;
margin-top: -1px;
margin-bottom: -1px;
z-index: 500;
}
.nav .table {
display: table;
margin: 0 auto;
}
.nav .select, .nav .current {
margin: 0px;
padding: 0px;
list-style: none;
display: table-cell;
white-space: nowrap;
}
.nav li {
margin: 0px;
padding: 0px;
height: auto;
float: left;
}
.nav .select a {
display: block;
height: 35px;
float: left;
background: url(dropline_0.gif);
padding: 0px 30px 0px 30px;
text-decoration: none;
line-height: 35px;
white-space: nowrap;
color: #fff;
}
.nav .current a {
display: block;
height: 35px;
float: left;
background: url(dropline_2.gif);
padding: 0 0 0 15px;
text-decoration: none;
line-height: 35px;
white-space: nowrap;
color: #ffffff;
}
.nav .current a b {
display: block;
padding: 0px 30px 0px 15px;
background: url(dropline_2.gif) right top;
}
.nav .select a:hover, .nav .select li:hover a {
background: url(dropline_1.gif);
padding: 0px 0px 0px 15px;
cursor: pointer;
color: #fff;
}
.nav .select a:hover b, .nav .select li:hover a b {
display: block;
float: left;
padding: 0 30px 0 15px;
background: url(dropline_1.gif) right top;
cursor: pointer;
}
.nav .select_sub {
display: none;
}
.nav table {
border-collapse: collapse;
margin: -1px;
font-size: 1em;
width: 0px;
height: 0px;
}
.nav .sub {
display: table;
margin: 0px auto;
padding: 0px;
list-style: none;
}
.nav .sub_active .current_sub a, .nav .sub_active a:hover {
background: transparent;
color: #f00;
}
.nav .select :hover .select_sub, .nav .current .show {
display: block;
position: absolute;
width: 900px;
top: 35px;
background: url(back_0.gif);
padding: 0px;
z-index: 100;
border-color: #414142;
border-left-style: solid;
border-right-style: solid;
border-width: 1px;
left : -1px;
right : 0px;
text-align : center;
}
.nav .current .show {
z-index: 10;
}
.nav .select :hover .sub li a, .nav .current .show .sub li a {
display: block;
float: left;
background: transparent;
padding: 0px 10px 0px 10px;
margin: 0px;
white-space: nowrap;
border: 0px;
color: #414142;
}
.nav .current .sub li.sub_show a {
color: #414142;
cursor: default;
background: url(menus/back_1.gif);
}
.nav .select :hover .sub li a:hover, .nav .current .sub li a:hover {
visibility: visible;
color: #1b75bc;
background: url(menus/back_1.gif);
}
h1,h2,h3,h4,h5,h6 {
font-family: arial, verdana, sans serif;
color: #1b75bc;
text-align: left;
}
p {
font: bold 14px arial, verdana, sans serif;
color: #414142;
text-align: left;
}
#body {
float: left;
width: 900px;
background-color: #ffffff;
border-color: #414142;
border-left-style: solid;
border-right-style: solid;
border-width: 1px;
}
#text {
width: 550px;
height: 900px;
margin: 25px 0px 0px 50px;
border-style: solid;
border-color: #1a1a1a;
float: left;
}
#side {
width: 200px;
height: 900px;
margin: 25px 0px 0px 10px;
float: left;
border-style: solid;
border-color: #1a1a1a;
}
p.links {
text-align: center;
font: 13px arial, verdana, sans serif;
}
#footer {
position: relative;
text-align: center;
vertical-align: center;
width: 900px;
height: 110px;
background-color: #fff;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #414141;
clear: both;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Worklinx - The self-employed workforce</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css"><!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="style_ie.css" />
<![endif]-->
</head>
<body>
<div id="global">
<div id="header">
<img class="displayed" src="newlogo2.gif" alt="worklinx" />
</div>
<div class="nav">
<div class="table">
<ul class="select">
<li>
<a href="#nogo"><b>Home</b></a>
</li>
</ul>
<ul class="select">
<li>
<a href="#"><b>About Us</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Our Goal </a></li>
<li><a href="#nogo">Our Values </a></li>
<li><a href="#nogo">Why Use Worklinx </a></li>
<li><a href="#nogo">Partners </a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li>
<a href="#nogo"><b>Our Services</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li><a href="#nogo">Construction </a></li>
<li><a href="#nogo">Installation </a></li>
<li><a href="#nogo">Maintenance </a></li>
<li><a href="#nogo">Repairs </a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li>
<a href="#nogo"><b>Our Sub-contractors</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">About our sub-contractors </a></li>
<li><a href="#nogo">Working for Worklinx </a></li>
<li><a href="#nogo">The Application Process </a></li>
<li><a href="#nogo">Join Us </a></li>
<li><a href="#nogo">FAQ </a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li>
<a href="#nogo"><b>Contact Us</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Request a Sub-contractor Application Pack </a></li>
<li><a href="nogo">Request a call back </a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
<div id="body">
<br />
<br />
<br />
<div id="text">
<h2>Welcome to Worklinx</h2>
<p>Welcome to Worklinx - the UK's only construction, installation, maintenance and repair company powered solely by a vetted workforce of self-employed sub-contractors and tradesmen.</p>
</div>
<div id="side">
<p>side boxes</p>
</div>
</div>
<div id="footer">
<p class="links">
<a href="index.html">Home</a> |
<a href="aboutus.html">About Us</a> |
<a href="ourservices.html">Our Services</a> |
<a href="oursubcontractors.html">Our Sub-contractors</a> |
<a href="contactus.html">Contact Us</a>
<br />
<br />
<a href="sitemap.html">Sitemap</a> |
<a href="contactus.html">Contact Us</a> |
<a href="legal.html">Legal</a> |
<a href="privacy.html">Privacy</a>
<br />
<br />
Copyright © 2007-2009 Worklinx. All rights reserved
</p>
</div>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401" alt="Worklinx.co.uk presents valid HTML 4.01 Transitional" height="31px" width="88px" border="0" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0px; width:88px; height:31px;" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Worklinx.co.uk presents valid CSS" />
</a>
</div>
</body>
</html>
Regards