body {

text-align: center;
font-size: 18px;
font-family: century gothic;
color: white;
}
#container {
width: 1200px;
margin:0px auto;
text-align: left;
background-color: #0bb;
}
#header {
background: url("imagenes/background4.JPG") top left no-repeat;
text-align: center;
width: 100%;
heigth: 200px;
margin: 0px;
padding: 0px;
}
#header h1 { margin: 0px; }
#header a {
width: 100%;
height: 200px;
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
}
#header a:hover {
background: url("imagenes/backgroundsd.png") top left repeat;
text-align: center;
margin: 0px;
padding: 0px;
text-decoration: none;
}
#header a span {visibility: hidden; }

#main {
font-size: 18px;
background-color: #979797;
background-image: url("imagenes/157.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 50%;
height: 1000px;
radding: 20px;
}
#footer {
height: 10%;
clear: both;
border-color: blue;
border-style: double;
}
<style>
/*el men es una lista*/
#nav {
background: #678 url(imagenes/sd2.jpg") repeat-x 0 -110px;
line-height: 100%;
margin: 0;
padding: 7px 6px 0;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li { /* cada tem de esa lista*/
float: left;
list-style: none;
margin: 0 5px;
padding: 0 0 8px;
position: relative;
}
/* las definiciones del nivel principal*/
#nav a {
color: #DDD;
display: block;
font-weight: bold;
margin: 0;
padding: 8px 20px;
text-decoration: none;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
#header a:hover {
background: #000;
color: #FFF;
}
/*efecto hover en el nivel principal*/
#nav .current a, #nav li:hover > a {
background: #468 url (imagenes/sd1.jpg) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #F8F8F8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow:0 1px 1px rgba(0,0,0, .2);
box-shadow:0 1px 1px rgba(0,0,0, .2);
text-shadow:0 1px 0 rgba(255,255,2500,1);
}
/* los subniveles*/
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #333;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #456 url("imagenes/sd1.jpg") repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius:0;
text-shadow:0 1px 1px rgba(0,0,0, .1);
}
/*el efecto de desplegar*/
#nav li:hover >ul {
display: block;
}
/* las definiciones de los submenues */
#nav ul{
background: #DDD url(textura3.jpg) repeat-x 0 0;
border: solid 1px #B4B4B4;
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 35px;
width: 185px;
-webkit-border-radius: 10px;
-moz-border-radius: 10x;
border-raduis: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,00.3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);
box-shadow: 0 px 3px rgba(0,0,0,.3)
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: noraml;
text-shadow: 0 1ox 0 #FFF;
}
/*las deficiones de los submenues internos */
#nav ul ul {
left: 181px;
top: -3px;
}
/*bordes redondeados del primer y el ultimo item */
#nav ul li: first-clild >a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child >a +{
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* definiciones generales*/
#nav:after {
clear: both;
content: ".";
dispaly: block;
height: 0;
line-height:0;
visibility: hidden;
}
#nav {dispaly: inline-bloack;}
html[xmls]#nav {dispaly:block;}
* html #nav {height: 1%;}
</style>