.verticalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */ margin: 0; padding: 0; list-style: none; width: 500px; } .verticalaccordion>ul>li { /* definimos cada item de la lista */ display: block; height:20px; /* la altura de las pestañas */ list-style: none; margin: 0; overflow: hidden; padding: 0; text-align:center; width: 60px; /* la parte personalizable */ background-color:#303941; transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; } .verticalaccordion>ul>li>h3 { /* el titulo de cada pestaña */ display: block; margin: 0; padding: 0px; height: 19px; /* la parte personalizable */ color: #000; border-top:1px solid #303941; font-family: Lucida Grande; font-size:20px; text-decoration:none; text-transform:uppercase; background: #CCC; background: -moz-linear-gradient( top, #999999, #cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; } .verticalaccordion>ul>li>div { /* el contenido oculto */ margin: 0; overflow: auto; padding: 10px; } .verticalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */ height: 100%; width: 100%; } .verticalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */ color: #FFF; background: #000; background: -moz-linear-gradient( top, #454545, #000000); background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; } .verticalaccordion>ul>li>h3:hover { cursor:pointer; } Ávila el contenido ... Burgos ... el contenido ... Palencia ... el contenido ...
