hola chicos, me pueden ayudar por fa. Hice un menú pero al colocarlo dentro de un div para que el fondo se extienda al 100% de ancho (por que si no le ponía el div no se podía alargar y no pude ponerle el color verde de fondo para que cubriera el ancho de la pantalla al 100%) y al desplegar el menú el fondo se abre y todo lo que hay debajo del menú se baja no se que me falla ayuda
Código HTML:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 11px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#menu-horizontal {
//width:700px;
//margin:auto auto;
}
#menu-horizontal li {
//margin:0 1px;
width:140px;//ANCHO DEL BACKGROUND DEL MENU
//min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:1px 0;
}
#menu-horizontal li:hover {
background:#C5014F;
}
#menu-horizontal li a {
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}
#menu-horizontal li ul li{
//float:none;
//width:98px;
margin:1px 0;
}
/*submenu*/
ul#menu-horizontal ul {
display: none;
//position: relative;
//top: 24;
//left:0;
//margin:0;
//padding:0;
background:#FFFFFF;
}
ul#menu-horizontal ul li {
display: block !important;
}
ul#menu-horizontal li:hover ul{
display: none;
}
ul#menu-horizontal li:hover ul{
display: block;
}
</style>
</head>
<body>
<div style="background-color:yellowgreen;">
<ul id="menu-horizontal">
<li><a href="#home">Home</a>
<ul>
<li><a href="#op">opcion 1</a></li>
<li><a href="#op">opcion 2</a></li>
</ul>
</li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>