Tengo un <div> con id="menu" que intento cambiar su color de fondo, pero por más que pruebo no me deja. Lo estoy probando con IE9 porque por el momento no tengo otro. Donde está mi error?
Tengo el siguiente código:
HTML:
Cita: <!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="contenedor">
<a href="index.html"><img src="images/logo.jpg"></a>
<div id="extras"><a href="http://www.youtube.com">youtube</a></div>
<div id="menu">
<ul>
<li><div class="botonera"><a href="empresa.html">Empresa</a></div></li>
<li><div class="botonera"><a href="productos.html">Productos</a></div></li>
<li><div class="botonera"><a href="innovacion.html">Innovación?</a></div></li>
<li><div class="botonera"><a href="noticias.html">Noticias</a></div></li>
<li><div class="botonera"><a href="galeria.html">Galería</a></div></li>
<li><div class="botonera"><a href="equipo.html">Equipo</a></div></li>
<li><div class="botonera"><a href="contacto.html">Contacto</a></div></li>
</ul>
</div>
<br><br><br>
<div id="multimedia" style="background-color:red;">
<img src="" style="width:600px;">
</div>
</div>
</body>
CSS:
Cita: body{
background-color: grey;
text-align:center;
}
a img{
width:30%;
border:none;
}
a:visited {
text-decoration:none;
}
a:link {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:blue;
}
ul li a {
display:block;
text-decoration:none;
color:black;
}
ul li {
list-style:none;
float:left
}
#contenedor {
position:absolute;
width:800px;
min-width:800px;
max-width:1200px;
margin:auto;
background-color: white;
text-align:left;
border-style:solid;
border-width:4px;
}
#extras {
position:relative;
text-align:right;
}
#menu {
position:relative;
width:800px;
margin:auto;
background-color: red;
text-align:center;
}
.botonera{
width:80px;
margin-left:10px;
margin-right:10px;
text-align:center;
background-color: white;
}
@media all and (max-width:799px) and (min-width:300px){
#contenedor {
width:300px;
min-width:300px;
max-width:799px;
}
#menu {
width:300px;
}
}
@media all and (max-width:299px){
#contenedor {
width:150px;
min-width:100px;
max-width:299px;
}
#menu {
width:100px;
text-align:left;
}
}