Color of menu items on hover

GK User
Wed Jan 11, 2012 7:33 am
Can i get different color for different menu items on mouse hover

If so please guide me with the procedure and the steps

will be waiting for your reply..Thankyou

Regards,
spokanet
User avatar
Junior Boarder

GK User
Wed Jan 11, 2012 8:12 am
This should work for j1.6-1.7 add it to your override.css file and make sure you have Override Css enabled in template advanced parameters.

Code: Select all
div.gk-menu > ul.level0 > li > a.haschild:hover {
    color: #ff0000!important;
}

div.gk-menu > ul.level0 > li .childcontent ul li:hover > a {
    color: #FF0000 !important;
}
User avatar
Expert Boarder

GK User
Wed Jan 11, 2012 8:19 am
Or
Code: Select all
div.gk-menu > ul.level0 > li > a:hover {
    color: #ff0000!important;
}
User avatar
Expert Boarder

GK User
Thu Jan 12, 2012 5:28 am
Thanks - this has helped my still I dint get the exact need - like I go on the menu item the hover color of button is blue i want it to come green in one then red in another

so different menu buttons different color on hover

Thankyou

will be waiting for the reply

Regards,
spokanet
User avatar
Junior Boarder

GK User
Thu Jan 12, 2012 7:56 am
That's not going to be easy because each li with a different colour would need a class applied to make the change.

Take a look at this Alternating Colours
User avatar
Expert Boarder

GK User
Thu Jan 12, 2012 8:19 am
Some more info:

The nth-child CSS pseudo-selectors allow you to target the 3rd or 7th or nth element in a list. Another use would be to style odd and even rows in a table differently. The alternative is to add a class specifically to the list-item you want to style differently, but that’s not very flexible. The nth-child syntax looks like this:

ul li:nth-child(3) {
background: blue
}

The above would select the 3rd item in the list and give it a blue background

ul li:nth-child(3n+3) {
background: blue
}

Similarly the code above would style every 3rd list item with a blue background

Unfortunately no current version of IE supports it. However there is a way to simulate the 1st bit of code above for IE7 and IE8.

ul > li:nth-child(3) is the same as ul > *:first-child + * + *

The code above will also target the 3rd element in the list in a way that IE7 and 8 understand. Not quite as useful as being able to use (3n+3) to target every 3rd list-item, but better than nothing. Hopefully IE9 will support nth-child.

Another and perhaps more practical solution currently is to use jQuery, which supports all CSS3 selectors.

Source: See item 31
User avatar
Expert Boarder

GK User
Thu Jan 12, 2012 3:07 pm
any way that i can attach css file to the menu

bcz joomla 1.7 has the option in menu setting ( link to css ) - http://writenowdesign.com/joomla-websit ... -joomla-17

But im not getting how to use that setting

help me out with it plz

Im in urgent need of it

I want different color in different tabs of menu

Thankyou

Regards,
sopkanet
User avatar
Junior Boarder


cron