Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>

<!-- Title -->
<title>CSS Test</title>

<style type="text/css">
a.shipping-info{border:1px solid #000;background:url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') 0 -59px no-repeat; width: 111px;height:59px}
a span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

ul#mega {
    float:left;
    width: 100%;
    list-style: none;
    font-size: 1.1em;
}
ul#mega li {
    float: left;
    margin: 0; padding: 0;
    position: relative;
    z-index:1 /* oh my word!!!! */
}
ul#mega li a {
    float: left;
    line-height:1.6em
}
ul#mega li:hover a, ul#mega li a:hover { background-position: left bottom; }
ul#mega li .sub {
    position: absolute;
    top: 58px; left: 0px;
    float: left;
    display: none;
}
ul#mega li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#mega li .sub ul{
    list-style: none;
    margin: 0; padding: 0;
    width: 150px;
    float: left;
}
ul#mega .sub ul li {
    width: 100%;
    color: #fff;
}

ul#mega li .sub {
    position: absolute;
    padding: 20px 20px 20px;
    float: left;
    width:440px!important;
    display: none;
}


/* ---------- Mega Drop Down --------- */
#mega {
list-style:none;
}
#mega li {
float:left;
position:relative;
}
#mega li:hover {
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
padding:7px 0 1px 0;
margin-top:-7px;
z-index:1; /* shadow above adjacent li */
}
#mega a {
color:#000;
outline:0;
text-decoration:none;
display:block;
line-height:2em;
}
/* ----------- Hide/Show Div ---------- */
#mega div {
position:absolute;
left:-999em;
margin-top:58px;
margin-left:1px;
width:350px;
padding:0 10px 10px;
border-top:0;
font-weight:normal;
text-align:left;
background:#19bcef;
}
#mega li:hover div {
left:-1px;top:auto;
}
#mega li.dif:hover div {
left:-221px;
}
/* --------- Within Div Styles --------- */
#mega div h2 {
background:#999;
font-size:1em;
padding:0 10px;
margin:10px 0 5px 0;
clear:both;
float:left;
width:330px;
position:relative; /* makes above drop shadow */
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
position:relative; /* makes above drop shadow */
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
width:100%; /* For IE6/7 */
line-height:1.4;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}

#mega li a#ship {
    width: 100px;
    height: 59px;
    position: relative;
}
#mega li a#ship span {
    background: url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}
#mega li a#ship span:hover {
    background: url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') 0 -59px no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}

</style>

</head>

<body id="home">

<div id="container">

      <div id="top">&nbsp;</div>

      <div id="middle">

      <div id="nav">

        <ul id="mega">

          <li><a href="/shipping/" id="ship" class="shipping-info"><span></span>Home</a>
          <b class="s4"></b>
          <div> <b class="s1"></b><b class="s2"></b><b class="s3"></b><br /><br />
            <p><a href="#">Test Link 1</a></p>
          </div>

          </li>

        </ul>

      </div>

  </body>

</html>