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
Related
So only within my sidebar widgets does this bullet above the widgets occur. I am not sure what custom css code to use to get rid of this. That is why I uploaded the picture of the inspect element to see if anyone can help me identify where the problem is coming from. Thank you so much in advance.
li {
list-style-type: none;
}
Try this
#sidebar-footer-secondary>div>li{
list-style: none;
}
or
.sidebar-footer-secondary>div>li{
list-style: none;
}
You must add class to selector, if you only want to change widget lists.
li.widget { list-style-type: none; }
You will need to remove the bullets with list-style CSS property. Ideally you'll want to use a CSS class to do this and since you're using WordPress try and use a class provided by the widget to hook onto. We hook onto a CSS class so we don't affect all ul or li on the page.
Not sure what yours would be but it might be something like this pseudo code:
<ul class="widget-alpha">
<li></li>
</ul>
.widget-alpha {
list-style: none;
}
FWIW, it's a bit odd that I don't see a ul for the li in the screenshot. The only permitted parents for li are ul, ol and menu.
If the li is the container element for the widget then the CSS selector would still work as we're not targeting a specific element but a CSS class of the widget.
I am working with this menu: http://cssmenumaker.com/menu/light-opera-drop-down-menu
I would like to make the last menu option unique and have it always highlighted red, with a unique hover/active. The problem I am having is navigating the existing code so that I can add styles to my unique option. I tried identifying it via the , and then I can call it in the stylesheet
#cssmenu ul li.donate:hover > a {
background: red;
This allows me to change the hover to red, but I am unable to get it to just always be highlighted red. I tried
#cssmenu ul li.donate {
background:red;
}
but that does nothing.
#cssmenu ul:last-child li.donate:hover > a {
try using :last-child
The reason your styles do not register is because the selector associated with your background declaration is not specific enough. In CSS, the C stands for Cascading. The browser trickles down or cascades multiple declarations that may or may not affect the same element. Ultimately the styles that will be applied are the ones that come with the most specific selector.
Here's the fiddle that works: http://jsfiddle.net/8kfwQ/2/. Hover over "products" and then "product 2" and you'll see a "Donate" link.
Here's the code that I've appended at the very end of the CSS in the fiddle:
#cssmenu .has-sub .has-sub ul li.donate a {
background-color: blue;
}
The selector is more specific and that's why the default maroon background gets overridden.
I want to make my wordpress menu items have 2 different background colors: one for the link and one for :hover. I'm a CSS beginner and found a solution but unfortunately it's not a good one because I target by the menu id generated by wordpress and if I delete the menu and create another one, that id will be gone and my styling will not work anymore.
Example:
menu-item-1212 a {
background-color:#fff;
}
menu-item-1212 a:hover{
background-color:#000;
}
Is there a more elegant way to solve this so that no matter what id the first menu item will have, it will retain that background-color and the hover one?
I've searched online for an alternative and found :nth-child. I did tried to create something like this:(but it didn't worked)
#menu-secondary li a:nth-child(1) {
background-color:#fff;
}
#menu secondari li a:hover:nth-child(1) {
background-color:#000;
}
Will appreciate any suggestion, thanks.
You are targeting an anchor which is the nth child of li element. Each li only has one anchor probably. You need to target li as the nth child of the menu, like this:
#menu-secondary li:nth-child(1) a {
background-color:#fff;
}
#menu secondari li:nth-child(1) a:hover {
background-color:#000;
}
You won't even need nth-child if you are using a common background color and common hover color..
#menu-secondary li a {
/* Styles goes here */
}
As you said you are not looking forward to use an id as it may be dynamic, than you can also select the elements using element selector if it's unique, like
div.class_name ul li a { /* class_name indicates your wrapper element class name */
/* Styles goes here */
}
Also be sure you make your anchor tag display: block; if you want to cover up entire li
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.
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.