How to edit my CSS to control footer menu styling? - css

I am working on a site
dev.pfp-consortium.org
For the footer menu I have an id footermenu. I thought I could do the following to style it, but it is not working:
#footermenu ul li a{
color: #b3d1ff;
}
#footermenu ul li a:hover{
color: #ffffff;
}
Any ideas? I am fairly new to CSS and all these inheritance relationships get confusing, as well as syntax. Thanks!


Try this way :
#footermenu li a{ color: #b3d1ff; }
OR
ul#footermenu li a{ color: #b3d1ff; }


footermenu is the id to the ul so #footermenu ul means you want a ul inside a container with id footermenu
Use this
ul#footermenu li a{
color: #b3d1ff;
}
ul#footermenu li a:hover{
color: #ffffff;
}


try this.,
ul#footermenu li a{
color: #b3d1ff;
}
ul#footermenu li a:hover{
color: #ffffff;
}


If you want the new style over the old inherited you should set !important like:
color: #ffffff !important;

Related

How to stay hover color after pressed

I'm using sahifa theme.I set special css for each buton on main menu.But something block my code and it's back to orjinal theme color blue.
I tried every rules
/* Altinci Menu */
.altinci-nav{
/*background-color: #866;*/
}
.altinci-nav:hover {
background-color: #8c5de4;
}
/*ul li.altinci-nav a,*/
.altinci-nav ul li a:hover,
.altinci-nav ul li a,
.altinci-nav ul li:hover > a,
.altinci-nav ul li:active,
ul li.altinci-nav:active{
background-color: #8c5de4;
}
.altinci-nav:active {
background-color: #8c5de4;
}
.altinci-nav:focus {
background-color: #8c5de4;
}
.altinci-nav:select{
background-color: #8c5de4;
}
.altinci-nav:after{
background-color: #8c5de4;
}
I look with firefox web developer tools and it's show problem that.
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover
So I make comment this lines bu nothing change
UPDATE
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover{ background-color: transparent !important; }
Thank you.Claudiu D.

find your .altinci-nav:hover css rule and add a chained one for the current page like this
.altinci-nav:hover,
.altinci-nav.current-menu-item {
do the same for other links

List mouse over not working

The main header menu of my site has an hover effect.But when i mouse over to the right of each menu item the text color is not changing but when i mouse over near the text it changes.
I have tried
.menu li:hover{background:#222;
color:white;}
.menu a:hover{
color:white;
}
but this didn't work.work. Please Help to make the hover effect.Thank you

try this,i think its compelete:
.menu li:hover{
background:#000;
}
.menu li a:link,
.menu li a:visited{
color:#000;
}
.menu li:hover a{
color:#FFF;
}

You need to change the color of the anchor's text when hovering over the li. Therefore use the following:
.menu li:hover a {
color: #fff;
}

Change it to this:
.menu li:hover{
background:#222;
color:white
}
.menu li:hover a{
color:white;
}

Try this,
.menu li:hover{
background:#222;
}
.menu li:hover a{
color:white;
}
This may be because your anchor has already css defined for itself. you need to override them.

CSS submenu hover color issue

I have a submenu in WordPress that was set up as a list in the following way:
.sidebar .widget { margin-top:20px; margin-bottom: 0px; padding-left:20px;}
.sidebar .widget h5 {line-height: 13px; margin-bottom: 30px; font-weight: bold;font-family: 'Droid Serif', Georgia, Times, serif; }
.sidebar .widget ul li { margin-bottom: 2px;background-color:#b3b1b2;padding:6px 2px; }
.sidebar .widget ul li a { margin-bottom: 2px;background-color:#b3b1b2;color:#ffffff ;padding:6px 2px; }
.sidebar .widget ul li a:hover { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
.sidebar .widget ul li a:active { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
See the page here: http://www.mahabbanetwork.com/who-we-are/
However, I would like the hover state to change the colour of the whole "bar" to the lighter grey, i.e. the full width instead of just the text-background which it is at present. I have played around with increasing the righthand padding but it, of course, increases it relative to the length/number of characters of the text link, which is different for each link.
This site uses a pre-coded WP template so I am not sure how to amend it to achieve the desire effect without messing things up elsewhere on the site.
Help would be greatly appreciated.

Add :hover to li
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}

Add the hover state grey color to .sidebar .widget ul li:hover instead of .sidebar .widget ul li a:hover
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}

Can i use the :first-letter and the :hover selector together?

I have the first letter selector working, to change the color of the first letter but when hovering that area the color matches with the background so it becomes invisible. This is the part of code working
.nav-menu li a:first-letter {color:#b5b503;}
.nav-menu li a:first-letter {font-weight:bold;}
.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
And this is the part where i guess i should add a .first-letter selector but cant find out how as it is already a hover selector in it
.nav-menu li:hover > a,
.nav-menu li a:hover {
background-color: #b5b503;
color: #273664;
}

Yes, you can
Example CSS :
p:first-letter {
font-size: 120%;
}
p:hover:first-letter {
color: white;
}
HTML :
<p>Hello world</p>
Demo here : http://jsfiddle.net/LRFw8/1/
For your code, you would style this in .nav-menu li a:hover:first-letter

Apply CSS to Anchor Tag of <ul> <il>

I have existing CSS as
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
which works fine
i want to restrict the application only to those anchor items which are part of an <ul><li> item under a div with class="tabs_container"
so this is what i did only to fail !
#tabs_container ul li a:active {
outline: none;
}
#tabs_container ul li a:focus {
-moz-outline-style: none;
}
am i doing it wrong ?
thanks in advance
EDIT
My bad ! actually the ID="tabs_container" not Class.
Further reference : This is part of the tutorial about How to create Tabs using Jquery from Scratch by Erric Berry.

Your element has a class but you are trying to reference it with an ID
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}

Try:-
ul > li > a:active
This should catch anchors which are a child of <li> elements which in turn are children of <ul> elements.

CSS classes are prefixed with a . (dot).
So, try
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}

Resources