First of all i would like to add that its been a while, about 3 years, since i've developed a dropdown menu in CSS. I have this drop down menu, but i have the following issue. apparently i cannot override properties of li/a elements of my submenu.
I would like to make the font color of submenu's li's a elements same as color of menu's ul's li's a elements, which is light grey ( rgb(206,206,204) )
Could somebody please take a look and point me at what i am doing wrong? Here's a link to a source code archive with html, css and background images:
http://www.filedropper.com/001_17
Your problem is in this rule:
div ul.menu li:hover a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
With that rule all <a>'s in that <li> turn white. What you need to do is have only the direct children turn white:
div ul.menu li:hover > a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
JSFiddle Demo
Related
I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/.
I normally just do this with 'add additional css' which just is a css file.
The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.
The css code I use now:
#menu-primary-coach li:hover{
/*#menu-primary-coach is the id of the lu*/
background-color: #c7143a !important;
}
But it doesn't work.
How can I change the background color when hovering over the menu items?
I noticed the <a>tag inside of your <li> is actually overriding the hover state with black.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
You can remove this style or also set the hover state of the <a> to your desired color.
It's caused by this line of CSS. There is a hover on the <a> within the <li>. Since the page is using xhtml the hover style should be on the <a> rather than the <li>. If you use HTML5 it can be on the <li>.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
My navigation has dropdowns, and within them there are a tags wrapping the items. I want the hover background color to be applied when I hover over that entire li. Right now it's only applying to the li, and when I move off the text it's the other background color.
Live here: http://stage.christinas-kitchen.com/
I'm working under "recipes", if you look under sprinkles that is how it should work (I have nothing wrapped in an a tag yet).
Any insight is appreciated.
One of the styles in your stylesheet is
.nav ul li ul li a {
background: #6ac4c2;
display: block;
color: #fff;
text-decoration: none;
}
That is your problem; since the a has its own background color, and the a is a child of the the li, changing the li's background color does not influence the a's background color.
You really just want the li styles to be determining the background color of your menu items, so just remove the background attribute from that style declaration. That way, the a's background will be dictated by the parent li, and your menus should work how you want them to
I have created a drop-down menu using CSS and HTML.
What I'm wanting is for the navigation menu item to turn back to blue when I hover over a sub-menu link. For example, when I hover over the Resources1 heading under the Resources heading, I want the Resources font to change back to the colour blue.
JSFiddle: http://jsfiddle.net/SSL78/
Can someone advise me how to do this using CSS?
Just change your :hover to the anchor tag and not the li tag.
#menu li a:hover{
color:red;
}
#menu li a:hover{
color:red;
}
Here is a JSFiddle of it
I try to make a horizontal menu bar with a table in HTML using CSS to design it. But the padding doesn't work the way I think it should: when I'm trying to change the background color of the whole li when the user "hovers it" with the mouse. But the padding seems to get wrong.
Here's my code in CSS (using Sassy CSS):
/* just to be sure the default of browser doesn't change look */
* {
margin:0;
padding:0;
}
/* some other design code ... */
#nav-menu {
padding:5px;
text-align:center;
/* change background: browser specific gradient */
background:$menu-bgcolor;
li {
list-style:none;
display:inline;
padding:2px 10px 2px 10px;
:hover {
background-color:$deco-dark;
color:$deco-verylight;
}
}
}
But the result looks something like the following:
As you can see the changed background color, which is $deco-dark in this case, doesn't affect the whole li area (the area with gradient), as i would expect. What can I do to change this behavior?
With SASS, the following:
li {
:hover { } }
will apply styles to any :hover elements inside the li. What you need is
li {
&:hover {} }
which will apply the style to the li element itself when it's hovered. Right now, the style is likely being applied only to the a inside the li.
Try changing your li's to display: inline-block; instead.
You could also place anchors in the li, then style the anchors accordingly. This is what I usually do. Also, like Brant said, are you using a list or a table? A list is probably better and is what you have implemented so just use that.
I'm attempting to use tabs generated by CSS to show an active state of an arrow under the tab. I was trying to position the image for the hover event with the background position properties, but it would bring the image outside of the given proportions of the tab.
This is the page: http://thegoodgirlsnyc.com/holly/about. The active tab should look like this:
The CSS styles are the following one:
#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p
How can I get this image to show at the bottom of the predefined background? These tabs will be included in multiple locations, with varying length of text, so they should only use the one image.
Due to the background image with diagonal lines I doubt it is possible to do what you need by styling one tag only.
The solution could be either styling both the LI and the inner A tags (see an example that is very close to your image there: http://www.litecommerce.com/services.html) or wrapping the anchor text into SPAN and styling the A and the inner SPAN tags.
Here's is HTML and CSS i got from tweaking your page in Firebug that gets the desired effect:
<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
Featured
</li>
You can convert the inline styles to the appropriate CSS styles. The above markup is just for the selected LI element and the anchor element inside.
Hope this helps you.
Ok, here's an updated version for you that should work (note, the above CSS should only be applied to the selected LI and the A element within):
Your HTML Markup
<ul class="nav">
<li class="nav-one current">Services</li>
<li class="nav-two">Clients</li>
</ul>
NOTE: class='nav-one current' on selected LI element instead of A element
Your NEW CSS
ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }
There is an error in your CSS selector. It should be:
#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }
Here's a sample of what i did in Chrome and the result:
NOTE: Also, it looks like your image path is not resolving to the image on your server correctly, in my case it is because I put in the full path to the image.
NOTICE: You didn't change the markup to have the "current" class on the LI element instead of the A element.