Próbowałem w <li class="sublink"> zmienić na <li class="sublink opened">, bez zmian.
Jak coś do dośle jeszcze ddaccordion.js.
HTML
JS
ddaccordion.init({
headerclass: "sublink",
contentclass: "submenu",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: false,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: false,
toggleclass: ["closed", "opened"],
togglehtml: ["none", "", ""],
animatespeed: "fast",
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
});
CSS
.navi ul > li:hover > div {
text-decoration: none;
background: #1b1b1b;
-webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.43);
-moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.43);
box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.43);
}
.navi ul > li {
background: url("../images/sep_9.png") repeat-x center bottom;
padding: 0 0 3px 0;
}
.navi ul > li:last-child {
background: none;
}
.navi ul > li:hover > div a, .navi ul > li.opened > div a {
color: #5b79a4;
background: url(../images/arrow_13.png) no-repeat 8px 9px;
}
.navi ul > li.opened:hover div {
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navi ul > li.sublink > div span {
background: url(../images/arrow_16.png) no-repeat 97% 8px;
}
.navi ul > li.opened > div span, .navi ul > li.sublink:hover > div span {
background: url(../images/arrow_17.png) no-repeat 97% 8px;
}
.navi ul > li > div a, .navi ul > li.opened > div > a:hover {
font-size: 14px;
text-decoration: none;
color: #c6c6c6;
text-shadow: 0 1px 0 rgba(0,0,0,0.64);
height: 30px;
color: #a1a1a1;
line-height: 27px;
padding: 0 0 0 31px;
background: url(../images/arrow_12.png) no-repeat 8px 9px;
}
.navi ul li ul {
margin: 0 9px 7px 9px;
background: #2b2b2b;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(54, 54, 54, 0.75), 0px 1px 3px 0px rgba(0, 0, 0, 0.23);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(54, 54, 54, 0.75), 0px 1px 3px 0px rgba(0, 0, 0, 0.23);
box-shadow: inset 0px 1px 0px 0px rgba(54, 54, 54, 0.75), 0px 1px 3px 0px rgba(0, 0, 0, 0.23);
}
.navi ul li ul.submenu li {
height: 27px;
line-height: 27px;
background: url(../images/sep_10.png) repeat-x center bottom;
padding: 0 0 2px 0;
}
.navi ul li ul.submenu li:last-child {
background: none;
}
.navi ul li ul.submenu li:first-child a {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.navi ul li ul.submenu li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.navi ul li ul li a {
padding: 0 0 0 27px;
background: url(../images/arrow_15.png) no-repeat 8px 8px;
color: #b3b3b3;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
}
.navi ul li ul li a:hover {
color: #ad3535;
background: #272727 url(../images/arrow_14.png) no-repeat 8px 8px;
text-decoration: none;
}