06/06/2012, 05:29
|
| | | Fecha de Ingreso: junio-2012
Mensajes: 5
Antigüedad: 12 años, 8 meses Puntos: 2 | |
| ¿como ajustar el desplegable de mi Menu?
Código:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Live Preview</title>
<style>
body {
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
}
@media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 1100px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="columns">
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
</body>
</html>
Y queria agregarle un menu
Código:
<div class='menu'>
<ul>
<li class='active '><a href='index.html'><span>Inicio</span></a></li>
<li><a href='#'><span>Categorias</span></a>
<div class='desp'>
<ul>
<li><a href='#'><span>Gifs</span></a></li>
<li><a href='#'><span>Motivaciones</span></a></li>
</ul>
</div>
</li>
<li><a href='#'><span>Nosotros</span></a></li>
<li><a href='#'><span>Contactanos</span></a></li>
</ul>
</div>
Pero Al agregar el CSS
Código:
.menu ul {margin: 0 auto; max-width: 1100px; min-width: 800px; /*centrado de menu*/ padding: 7px 6px 0; background: #7d7d7d url(images/overlay.png) repeat-x 0 -110px; line-height: 100%; border-radius: 1em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
.menu li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
.menu a {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .3); }
.menu a:hover {background: #000; color: #fff;}
.menu .active a,
.menu li:hover > a {background: #666 url(images/overlay.png) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
.menu ul ul li:hover a,
.menu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
.menu ul ul a:hover {background: #8f8f8f url(images/overlay.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
.menu li:hover > ul {display: block;}
.menu ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(images/overlay.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
.menu ul ul li {float: none; margin: 0; padding: 3px; }
.menu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
.menu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
Lo intento centrar en el body con .menu ul {margin: 0 auto; max-width: 1100px; min-width: 800px; Pero el li del delplegable se me amplia al valor que le da la gana :A |