I'm trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)
As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what I understand, that means it's been overidden, but I don't know what by...
If anyone has a similar code feature in their browser, I would really appreciate it if you could check it out. I made the menu all by myself, so I'd like to think I can code, but I just can't understand what's overiding the font colour.. I think it's line 73 of the new_menu_style.css file.
You should try adding this to the CSS:
.menu ul li:hover ul li a {
color: #ccc;
}
.menu ul li:hover ul li a:hover {
color: black;
}
The .menu ul li:hover a gets a higher weight than the other one, overriding it.
First: Do something about your code style. proper indentation makes a great effort to increase readability:
So here is a solution: add this to your css as these override the .menu ul li:hover a
.menu ul li:hover ul a {
color:#ccc
}
.menu ul li:hover ul li:hover a {
color:#000
}
Related
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
smarter people than me!
I've been racking my brain for awhile with some css for this wordpress website On the navigation menu (Campus, National, World,...) I'm trying to do some custom css where when you hover your mouse over the menu items and they change color. Right now they only turn black except for the Campus menu item which changes to what I want for a moment then changes to black.
My attempt was to try this short css in the stylesheet, but it didn't work. I suspect I might have to adjust the upper-nested classes.
.menu-item-28 a:hover{
background:#1f61c4;
}
This is probably an easy question but my css-fu is pretty bad. Any help help is much appreciated!
Try changing your selector to
#menu-main-navigation li a:hover{
background-color:#1f61c4;
}
This will target any anchor (a) inside your main navigation (instead of only the one found under .menu-item-28 - ie. campus)
There is this CSS rule in the code
#nav nav > ul > li > a:hover {
background: #222222;
border-color: #222222;
color: #fff;
}
which causes the black background on hover. You probably can't change that, I suppose. But if you put another rule somewhere "later" (= below it) in the code, you can overwrite it with your own background color:
#nav nav > ul > li > a:hover {
background: #1f61c4;
}
Im trying to change to the color in both the drop down menu, as well as the footer background color of the site http://ablecareinhome.com/
Ive tried numerous css tweeks to make this change, but I am at a stale mate. I was able to get the nenu buttons themselves to change using the following:
#menu li.current-menu-item a,
#menu li.current-menu-parent a,
#menu li.current_page_parent a,
#menu li a.selected,
#menu li a:hover,
#menu li.current_page_item a {
background: url("../images/menu-bg.png") repeat-x scroll center top #00a99d !important;
}
this is the color i am going for in the other footer and menu parts. #00a99d
Any help is appreciated. As a side note, this theme allows internal css options/modifications without building a full childs theme. It is done from the dashboard, and stylesheets are coming from external source it appears.
Any help is greatly appreciated!!
well see the css here
#menu .sf-menu li li {
font:12px Arial, Helvetica, sans-serif !important;
text-transform:capitalize;
margin:0;
padding:0;
background-color: #00a99d;}
As for footer its an image see the link
you can remove the backgroun image and
edit this css
.footer-container {
background:url(../images/footer-bg.png); remove this
background-color: # #00a99d;}
I have a site here
At the top of the screen, you'll see a menu. Hover onto "Everything" and you'll see a sub-menu.
When you hover over an item, you'll see a dark grey background on each menu item. The text stays red, and I want the text to be white on hover.
Here's what I have so far...
#nv-tabs ul li ul li:hover {background: #252525!important; }
It looks like the text color (on hover) should also be in this div id, so I've tried this...
#nv-tabs ul li ul li:hover {background: #252525!important;color: #FFFFFF;}
...but it's not working.
Not sure where I'm going wrong here.
Try
#nv-tabs ul#dyndropmenu.menu li ul.sub-menu li a:hover {
color:white !important;
}
^ should make the text white on hover while the other texts stay red.
Try something like this #nv-tabs ul li ul li:hover a {color: white !important;}
Considering you said your code is not working... you may have something setting the color of the text of your <a> tags directly... that's why you possibly need to access directly your <a> tags to change their text color...
I can see this in your code :
#nv-tabs a {
color: #000000;
}
I think this is why you must access your <a> tags directly to change the color. If the color was set with #nv-tabs ul li ul li you could probably do #nv-tabs ul li ul li:hover to change it.
If someone can name this behaviour, I'd be pleased. I don't know how it is called, but I'm pretty sure that's how it works.
Hi I am having a very strange experiencing with list item navigation menu.
On the main parent li I have a background color, but when I drop down in to the li ul li I want the background color to be removed, which on all browsers except IE9/8/7 works fine.
My Basic code is:
.topnav li {
background:#c60;
}
.topnav li ul li {
background:none;
}
in IE is still displays the background color, i have tried everything I can think of.
the website is link is
The lis have a gradient filter applied to them in Internet Explorer - you'll need to set this to none (or equivalent) to remove the background.
E.g.
.topnav li ul li { filter: none; }