<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="author" content="Juan" />
<meta name="copyright" content="Copyright 2014" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<style>
#cabecera {
margin: 3% auto 0 auto;
width: 70%;
height: 180px;
padding: 1px;
background-color: #ececec;
}
#cabecera #imagen {
padding-top: 1px;
height: 78%;
background: url("banner3.png") repeat-x center top; margin-top: 3.1%;
}
#cabecera #menu {
text-align: center;
margin: 0;
}
#cabecera #menu ul {
width: 93%;
margin: 0 auto;
padding: 0;
}
#cabecera #menu li {
margin: 0.29% 0.9%;
list-style-type: none;
display: inline;
float: left;
width: 14.7%;
height: 30px;
font-size: 125%;
text-align: center;
background: url("nav.jpg") no-repeat; }
#menu li a {
margin: auto auto;
display: block;
padding-top: 0;
color: white;
width: 105%;
height: 100%;
}
#menu li a:hover {
background-color: black; color: white;
}
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { #cabecera {
width: 95%;
}
#cabecera #menu li {
font-size: 80%;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=0.3">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<div id="menu">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</div>
<div id="imagen"> </div>
</div>
</div>
</body>
</html>
