On the following test site (http://tronitech.brettatkin.com/index.asp), I want each navigation element to have a different look when it is the active page.
I have assigned a class to the anchor element when that page is active.
When I add the CSS inline, it works (the home page for example), but when I drop it in a class it doesn't.
Here is my CSS:
#navigation ul li .active-link a {
color: #326ea1;
background-image: url(/images/nav-current.jpg);
background-repeat: repeat-x;
}
I think it is something with inheritance, but I'm not seeing the issue...
Thanks
Brett
Change your selector to the following
#navigation ul li a.active-link
a .active-link tries to match an anchor tag with a child that has class active-link. a.active-link matches anchor tags with class active-link.
it's not #navigation ul li .active-link a but it should be #navigation ul li a.active-link. The first rule says link that is decendant of class active-link whlie second says link with a class active-link - which is what you've got in your markup.
In fact both selectors are way too long.
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.
I'm trying a pure css approach to keeping the 'parent-most' navbar item highlighted when a child is clicked upon and a user navigates to that page. I have a primary navbar div with an unordered list, and each list has a list like so, so in this case a user navigates to the second most li here:
.primary-navbar ul li ul li{
background-color: red !important;
}
how do I make it so when the second li is active, the first li has background color of blue?
I tried:
.primary-navbar ul li:active {
background-color: blue !important
}
but that did not work and I'm not sure why. I'm trying to avoid jquery...
:active is the state of the element when active (i.e. a link is active when it is clicked). When you load the new page, no elements are active. You'll need to add a class to the li on the new page (something like 'active' or 'current-page' for example) to get the effect you're looking for. It's not possible with CSS only.
When you implement that, you should also take a second look at your CSS:
.primary-navbar ul li.active {
background-color: blue !important
}
That will not only make the first (parent) li.active blue, it will also target any li.active nested beneath it. i.e. it will also make .primary-navbar ul li.active ul li.active blue.
Try something like:
.primary-navbar > ul > li.active {
background-color: blue;
}
The >s will only target the li.active that is directly under the ul that is directly under .primary-navbar
I am learning CSS and facing a issue while applying the style rule for "a" tag. I have a navigation containing unordered list containing list items which contains link. On hovering on the "li" tag, I want to change the color of the text inside the "a"tag. The below is the code I added for applying the css rule.
#top-nav ul >li:hover a{
color: #FFFFFF;
}
But this rule is applied to all the Links on the page. How can I ensure that the rule applies to all the direct links within the #top-nav ul > li and not all the child elements under #top-nav ul > li
Currently the above rule is being applied to #top-nav ul>li and li elements deep inside the div tag under the li tag
Add a direct descendant selector after hover.
#top-nav ul > li:hover > a
I'm having a bit of trouble with inheritance. if you expand the first menu item and mouse over you'll see a grey fly-out with a link in it. the link inside inherits the original styles and I'm not sure how to stop it from taking on those styles. i just want them to be the default link style while inside the fly-out. I've tried selectors but i'm not having any luck. ideas?
I put my code up here: http://pastie.org/3388191
Just use a CSS's child combinator, ul > li to define the styles to your main list items, that way those styles won't be inherited past your second level subnav, like so:
#nav > ul > ul {
background-color: #999999;
height: 299px;
margin: 0;
padding: 0;
width: 652px;
}
Demo: http://jsfiddle.net/kQuGd/1/show/
EDIT
Read your question too fast and didn't see what your real problem was, sorry about that. There's two ways (that I know of) to fix your link problem.
One way is to add the third level menu links to your default style
a, #nav ul ul a {
// YOUR STYLE PROPERTIES
}
a:hover, #nav ul ul a:hover {
// YOUR STYLE PROPERTIES
}
The second way is to assign a class to either the links in the third level menu, or the links in the first and second level menus.
If you assign a class to the third level links, just apply the same styling to that class as your default links.
If you assign classes to the first and second level links instead, and thus remove all link styles like
#nav ul a
your third level links will automatically get the default link style.
The problem is the use of #nav a which applys a styling to all links within #nav
I am building a menu using XHTML,CSS, and jQuery and I ran into a problem with my CSS.
Here is my test page, and here is my css.
What I am having problems with is that my .subMenu class is inheriting the properties of my #menu, the background colors and sizes are the same. I am looking for a solution that leaves .subMenu as a class so I can re-use it. I got it to work by changing .subMenu to an ID. The weird thing is that I edit some of the properties in my jQuery code using the .subMenu class and it changes those.
So I was wondering if someone could let me know how to fix it and if it was a hierarchy issue if they might explain it.
Thanks,
Levi
I think the problem is that the #menu > li a will apply that style to all links inside of the li tags, so all of the li tags inside of the submenu will also have this style. It looks to me that the only difference is in the background and foreground colors on hover, so you could fix it by changing #menu > li a and #menu > li a:hover to be #menu > li > a and #menu > li > a:hover. This way, the styles for the top level menu will only be applied to links which are directly after an li tag which are directly after the #menu item. The submenu styles can stay the same.