![Antiguo](http://static.forosdelweb.com/fdwtheme/images/statusicon/post_old.gif)
15/09/2011, 09:09
|
| | Fecha de Ingreso: septiembre-2011
Mensajes: 5
Antigüedad: 13 años, 4 meses Puntos: 0 | |
Respuesta: Problemas con menús CSS
Código:
* {
margin: 0;
padding: 0;
}
/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}
body {
line-height: 1;
background: #f1f1f1 url("images/bg.gif") repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px;
}
/* layout */
#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 3px;
margin-bottom: 3px;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
#div_menu {
width: 940px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 5px;
}
nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: #110E0F;
}
header {
width: 940px;
height: 170px;
margin: 0 auto;
background: #fff url("images/headerimg.jpg") no-repeat left top;
}
#main_ini{
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_mem {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_conso {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_not {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_res {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_contact {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#datos_interes {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#content {
float: right;
width: 940px;
}
#cont_tab{
border:'';
width:500px;
}
#tab_footer{
border:'';
width:940px;
margin-right: 700px;
}
footer {
width: 940px;
margin: 0 auto;
clear: both;
}
/* basics */
h1,h2,h3,h4,h5 {
font-weight: bold;
clear: both;
color: #333;
}
h6{
font-weight: bold;
font-size:16px;
color: #444;
}
a:link, a:visited {
color:#6DBB0D;
}
a:hover, a:active {
color: #333;
}
p {
margin-bottom: 18px;
}
li {
padding-left: 5px;
}
/* nav */
nav .menu {
font-size: 16px;
font-weight: bold;
}
nav .menu ul {
margin: 0;
padding: 17px 0 0 20px;
list-style: none;
line-height: normal;
}
nav .menu li {
display: block;
float: left;
}
nav .menu a {
display: block;
float: left;
margin-right: 5px;
margin-left: 25px;
padding: 0px 15px;
text-decoration: none;
color: #FFF;
}
nav .menu a:hover {
color: #639cb9;
}
/** HEADER */
header h1, header h2 {
margin: 0;
padding: 0 0 0 30px;
line-height: normal;
}
header h1 {
font-size: 40px;
float: left;
padding-top: 20px;
}
header h1 a:link, header h1 a:visited {
text-decoration: none;
color: #FFF;
}
header h1 a:hover {
text-decoration: underline;
}
header h2 {
padding: 20px 0 0 30px;
font-style: italic;
font-size: 14px;
color: #FFFFFF;
}
/** ARTICLES **/
article {
padding: 0 30px 0 30px;
}
article img {
border: none;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
article h2 {
margin-top: 20px;
}
#content p, ul, ol, hr {
margin-bottom: 24px;
}
#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}
#content h1, h2, h3, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
}
.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright, img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}
/* footer widget blocks */
aside h3 {
font-size: 18px;
}
aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
}
aside li a {
display: block;
text-decoration: none;
}
aside li a:hover {
text-decoration: underline;
}
#footer-area {
background: #000;
color: #FFF;
font-size: 85%;
padding: 10px 0;
width: 940px;
height: 40px;
overflow: hidden;
}
.footer-segment {
float: left;
margin-right: 20px;
margin-left: 20px;
width: 190px;
}
footer aside h4 {
color: #FFF;
font-size: 16px;
line-height: 1.5em;
}
footer a:link, footer a:visited {
color: #FFF;
}
footer p {
margin-top: -15px;
}
/** ACCORDION */
.accordbk {
background: #fff;
/*Color degradado de fondo*/
background:-webkit-gradient(linear, 50% 0%, 51% 80%, from(#286a8d), to(#FFFFFF));
/*url(images/accordinfo.gif) bottom right no-repeat;*/
}
.horizontalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
height: 432px;
}
.horizontalaccordion>ul>li {
display:block;
overflow: hidden;
float:left;
margin: 0;
padding: 0;
list-style:none;
width:40px;
height: 450px;
background:#f0f0f0;
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}
.horizontalaccordion>ul>li>h3 {
display:block;
float:left;
margin: 0;
padding:10px;
height:19px;
width:450px;
border-left:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background:#cccccc;
white-space:nowrap;
-moz-transform: rotate(90.0deg) translate(-40px,0px);
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px);
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px);
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px);
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
/*Posición del texto dentro de los menús*/
.horizontalaccordion>ul>li>div {
display:none;
float:left;
overflow: auto;
position:relative;
top:-30px;
left:50px;
*top:0px;
*left:0px;
margin:0;
width:640px;
height:450px;
}
.horizontalaccordion>ul>li>div img {
float: left;
margin-right: 8px;
}
.horizontalaccordion>ul>li:hover {
overflow: hidden;
width: 780px;
}
.horizontalaccordion:hover>ul>li:hover>div {
display:block;
}
.horizontalaccordion:hover>ul>li:hover>h3 {
color:#fff;
background:#000000;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.horizontalaccordion>ul>li>h3:hover {
cursor:pointer;
}
.horizontalaccordion h4 {
font-size: 16px;
}
He sub-rallado dónde hace la transición, es decir, cuando me pongo encima del menú (que no le hago click), el menú se despliega. Lo que busco es que por ejemplo "Inicio" esté siempre desplegado. |