On rolling over a submenu option i want to keep the colour of the button in an active state
http://www.milknhny.co.uk/SofiaWork/
ul.headermenu ul ul li a:hover
the above appears to not work, can someone advise?
thanks
You have to use JavaScript to keep that state of style in tact. What you do is bind listeners to the menu ul's and keep the coloring as is when hovering it's (sub-)children.
CSS4 (not safe to use yet) has a parent selector;
ul ul! < li:hover {
}
Related
Might be a small thing, but I am struggling to find out how the hover selector works logically in dropdown menus.
Here's the entire code in question: https://jsfiddle.net/5dcd9zLh/
.droplist {
display:none;
}
li:hover > .droplist {
display: block;
}
Here's my understanding of the current code.
Step 1: li is being hovered over
Step 2: Select all child elements .droplist
Step 3: Apply styling display:block to .droplist
Wouldn't that mean the moment I start to hover my cursor from li over to droplist, the styling would revert back to display:none? Why is it that .droplist maintains its display:block property when li is no longer being hovered over?
Because .droplist is child of li tag. Thus, when you hover to .droplist, this still known as you hover on li tag.
The :hover selector can be known is: "When mouse over me or all of my childs"
Hope this will help you understand this!
I am working on this website and i am trying to highlight with a border-bottom the active menu link. As you can see is a one scroll website but i can't highlight it via CSS. I want to highlight the MÖGLICHKEITEN - GALERIE - KONTAKT links when they are active.
I tried this:
CSS:
#dslc-module-84 .dslc-navigation .menu > li > a:active { border-bottom: 1px solid #3da22b !important; }
Any ideas?
EDIT:
KONTAKT
You need to use parent child selector CSS to achieve what you are looking for.
For instance,
.menu li.menu-item a._mPS2id-h.mPS2id-clicked.mPS2id-highlight{
border-bottom: 1px solid #3da22b !important;
}
You need to target the main parent menu class which is .menu in your case and go on to select its child till you reach li with the selected menu. Once you do, target it's child a to achieve what you are looking for.
Hope this helps.
Wordpress provides classes for the current menu item (i.e: .current-menu-item).
You should use these selectors to declare your style rule for the given menu item.
Examples:
.menu li[class*="current"] {...}
.menu .current-menu-item {...}
More specific to your case:
.menu li a[class*="-highlight"],.menu li a[class*="-clicked"] {...}
Regarding the :active pseudo-class you initially tried to use:
The :active CSS pseudo-class matches when an element is being
activated by the user. It allows the page to give a feedback that the
activation has been detected by the browser. When interacting with a
mouse, this is typically the time between the user presses the mouse
button and releases it. The :active pseudo-class is also typically
matched when using the keyboard tab key. It is frequently used on
and HTML elements, but may not be limited to just those.
(Source: active - CSS | MDN)
Learn more: :active - CSS | MDN
Just use this:
#dslc-module-84 .dslc-navigation .menu > li.current-menu-item > a {
color:#eee;
}
I'll try to explain this as best I can - I'm playing with a CSS vertical menu, take a look at it here:
http://codepen.io/jgclifton/pen/JIfhy
My question is, how do I ensure that the links keep their hover color when navigating to the submenu of that item.
I hope that makes sense, I tried using a:active but it seemed to have no effect.
Set the color on the hover state of the li:
.menu-side-menu-container li:hover > a
{
#FFFFFF;
}
Live Demo: http://jsfiddle.net/xxf9B/1
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.