problemas con menu css

Drago25 · #1 (**permalink**) 06/09/2015, 20:31

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>

AngelKrak · #2 (**permalink**) 07/09/2015, 07:09

amigo para los Menú existe la Etiqueta <nav> en vez de <div> y si tu problema era el fondo que se bajaba en el sub-menu puedes solucionarlo poniéndole un height al Menu ;)

Código CSS:

Ver originalnav {
  height: 36px;
}

Demo:
http://codepen.io/AngelKrak/pen/zvGBoJ

Drago25 · #3 (**permalink**) 07/09/2015, 11:21

hola solo que en el ejemplo lo puse como si trabajara con HTML5 pero en realidad es anterior ya lo probe y funciona solo que hay una cuestión lo que hay debajo del menú lo mueve de su posición original a la derecha o hacia abajo como podría resolverlo amigo?

Drago25 · #4 (**permalink**) 07/09/2015, 11:22

Cita:

Iniciado por AngelKrak

amigo para los Menú existe la Etiqueta <nav> en vez de <div> y si tu problema era el fondo que se bajaba en el sub-menu puedes solucionarlo poniéndole un height al Menu ;)

Código CSS:

Ver originalnav {
  height: 36px;
}

Demo:
[url]http://codepen.io/AngelKrak/pen/zvGBoJ[/url]

hola si es asi como lo pensé, solo que en el ejemplo lo puse como si trabajara con HTML5 pero en realidad es anterior ya lo probé y funciona solo que hay una cuestión lo que hay debajo del menú lo mueve de su posición original a la derecha o hacia abajo como podría resolverlo amigo, y también para centrar el menú uso text-aling=center?

AngelKrak · #5 (**permalink**) 07/09/2015, 12:49

no entendi muy bien amigo, cual es exactamente tu problema ahora amigo? podrias mandar una cap de tu error?