Sub-item active state css
Hi
I'm developing a website, you can check it here - 94.46.8.45/~printcri/index.php/es/print-criativa/quem-somos
and I'm using accordeon CK menu. I've styled the menu on the template css, and everything is working as expected except for the active state on the sub-itens of the menu...i've tried several things in the css but without success.
Can you help me? Basically i want to give a style to sub-itens when they are active... (all the sub-itens will have the same style).
Follows the css for the menu i've created:
/*
MENU---- */
#menu {
float: left;
width: 235px;
}
#menu ul {
margin: 0px;
padding: 0px;
text-align: left;
}
#menu ul li {
display: block;
list-style-type: none;
list-style-image: none;
}
#menu ul li a {
display: block;
padding: 5px;
width: 225px;
text-transform: uppercase;
color: #FFF;
background-color: #333;
font-size: 14px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
#menu ul li a:hover {
text-decoration: none;
}
#menu ul li:nth-child(1) a {
background-color: #f29400;
}
#menu ul li:nth-child(2) a {
background-color: #e2001a;
}
#menu ul li:nth-child(3) a {
background-color: #e2007a;
}
#menu ul li:nth-child(4) a {
background-color: #009ee0;
}
#menu ul li:nth-child(5) a {
background-color: #172983;
}
#menu ul li ul li:nth-child(1) a,
#menu ul li ul li:nth-child(2) a,
#menu ul li ul li:nth-child(3) a,
#menu ul li ul li:nth-child(4) a,
#menu ul li ul li:nth-child(5) a,
#menu ul li ul li:nth-child(6) a,
#menu ul li ul li:nth-child(7) a,
#menu ul li ul li:nth-child( a,
#menu ul li ul li:nth-child(9) a,
#menu ul li ul li:nth-child(10) a {
display: block;
text-transform: none;
color: #000;
font-size: 12px;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 10px;
text-decoration: none;
float: left;
width: 220px;
background-color: #EEEEEE;
}
#menu ul li ul li a:hover {
display: block;
text-transform: none;
color: #172983;
font-size: 12px;
text-decoration: none;
background-color: #E3E3E3;
}
I'm developing a website, you can check it here - 94.46.8.45/~printcri/index.php/es/print-criativa/quem-somos
and I'm using accordeon CK menu. I've styled the menu on the template css, and everything is working as expected except for the active state on the sub-itens of the menu...i've tried several things in the css but without success.
Can you help me? Basically i want to give a style to sub-itens when they are active... (all the sub-itens will have the same style).
Follows the css for the menu i've created:
/*
MENU---- */
#menu {
float: left;
width: 235px;
}
#menu ul {
margin: 0px;
padding: 0px;
text-align: left;
}
#menu ul li {
display: block;
list-style-type: none;
list-style-image: none;
}
#menu ul li a {
display: block;
padding: 5px;
width: 225px;
text-transform: uppercase;
color: #FFF;
background-color: #333;
font-size: 14px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
#menu ul li a:hover {
text-decoration: none;
}
#menu ul li:nth-child(1) a {
background-color: #f29400;
}
#menu ul li:nth-child(2) a {
background-color: #e2001a;
}
#menu ul li:nth-child(3) a {
background-color: #e2007a;
}
#menu ul li:nth-child(4) a {
background-color: #009ee0;
}
#menu ul li:nth-child(5) a {
background-color: #172983;
}
#menu ul li ul li:nth-child(1) a,
#menu ul li ul li:nth-child(2) a,
#menu ul li ul li:nth-child(3) a,
#menu ul li ul li:nth-child(4) a,
#menu ul li ul li:nth-child(5) a,
#menu ul li ul li:nth-child(6) a,
#menu ul li ul li:nth-child(7) a,
#menu ul li ul li:nth-child( a,
#menu ul li ul li:nth-child(9) a,
#menu ul li ul li:nth-child(10) a {
display: block;
text-transform: none;
color: #000;
font-size: 12px;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 10px;
text-decoration: none;
float: left;
width: 220px;
background-color: #EEEEEE;
}
#menu ul li ul li a:hover {
display: block;
text-transform: none;
color: #172983;
font-size: 12px;
text-decoration: none;
background-color: #E3E3E3;
}
by Katfun
Please Log in or Create an account to join the conversation.
Hi
if you want to style the active items, use the class "active"
li.active
you can use firebug to help
Ced
if you want to style the active items, use the class "active"
li.active
you can use firebug to help
Ced
Joomlack Webmaster and Developer
by ced1870
Please Log in or Create an account to join the conversation.
Thanks for the help-..i've figured out!
by Katfun
Please Log in or Create an account to join the conversation.
Time to create page: 0.635 seconds