Sub-item active state css
12 years 1 month ago #6042
by Katfun
Sub-item active state css was created by Katfun
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;
}
Please Log in or Create an account to join the conversation.
12 years 1 month ago #6043
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic Sub-item active state css
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
Please Log in or Create an account to join the conversation.
12 years 1 month ago #6044
by Katfun
Replied by Katfun on topic Sub-item active state css
Thanks for the help-..i've figured out!
Please Log in or Create an account to join the conversation.
Time to create page: 0.234 seconds