mark_o Posted June 12, 2012 Report Share Posted June 12, 2012 este menu esta horizontal y lo kiero dejar vertical , como lo puedo hacer? <html><head><style type="text/css">body{background:#3CF;}nav{/*Bordes redondeados*/-webkit-border-radius:10px;/*Para chrome y Safari*/-moz-border-radius:10px;/*Para Firefox*/-o-border-radius:10px;/*Para Opera*/border-radius:10px;/*El estandar por defecto*/background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*//*Degradados*/background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/overflow:hidden;padding:10px;width:950px;}nav ul{list-style:none;margin:0 10px 0 10px;padding:0;}nav ul li{/*Bordes redondeados*/-webkit-border-radius:5px;/*Chrome y Safari*/-moz-border-radius:5px;/*Firefox*/-o-border-radius:5px;/*Opera*/border-radius:5px;/*Estandar por defecto*/float:left;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;margin-right:10px;text-align:center;/*Sombras para texto, los mismos parametros que box-shadow*/text-shadow: 0px 1px 0px #FFF;}nav ul li:hover{/*Degradado de fondo*/background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*//*Sombras*/-webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/-moz-box-shadow: 1px -1px 0px #999;/*Firefox*/-o-box-shadow: 1px -1px 0px #999;/*Opera*/box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/border:1px solid #E3E3E3;}nav ul li a{color:#999;display:block;padding:10px;text-decoration:none;/*Transiciones*/-webkit-transition: 0.4s linear all;-moz-transition: 0.4s linear all;-o-transition: 0.4s linear all;transition: 0.4s linear all;}nav ul li a:hover {color:#000;} </style></head><body><nav><ul><li><a title="Opcion 1" href="#">Opción 1</a></li><li><a title="Opcion 2" href="#">Opción 2</a></li><li><a title="Opcion 3" href="#">Opción 3</a></li><li><a title="Opcion 4" href="#">Opción 4</a></li><li><a title="Opcion 5" href="#">Opción 5</a></li></ul></nav></body></html> Link to comment Share on other sites More sharing options...
maipgeut Posted June 14, 2012 Report Share Posted June 14, 2012 quitale el float: left; Link to comment Share on other sites More sharing options...
maxuber Posted June 25, 2012 Report Share Posted June 25, 2012 Amigo Lo otro es forzar a que sea de forma vertical o también como dice el socio quitar el float left Forzar: lo que puedes hacer es que como el menu es un lista y todos parten de una etiqueta <ul></ul>, es darle un estilo widht con un ancho de pixeles aprox. de acuerdo a tu maqueta web y las etiquetas dejarlos en display:block; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now