I have a multi-level menu look like
I want my menu
Has the same background (#5b740d as you see)
Has the same active background (red as you see)
Has the same hover background (red as you see)
And three above option will for all menu and sub-menu
But my code look like complex. Here is my example code for hover
/* hover: can using a simple selector to make all are same background */
.menu li:hover {
background: red;
}
.menu li li ul li a:hover {
background: red;
}
.menu li ul li:hover a {
background: red;
}
I get the css on internet but it's complex then i change it by my way (But it still complex :( plz help me make it simple ).
But i get bug: when i hover item (2) like in my picture bellow then item (3) was hover?
plz simplified my css code to do three option above (i don't understand complex code :( ) and help me fix my bug thank.
Here is my code http://jsfiddle.net/SWF6w/
There's no way to make this more 'simple', there is very little superfluous markup or definitions in that code, so I don't really understand your appeal to make it more simple.
You can easily fix the red hover on child elements by specifying a direct descendent selector on your li:hover a selector, though. For example:
.menu li ul li:hover > a {
background: red;
}
Will produce this result > http://jsfiddle.net/SWF6w/1/
Replace this piece of code :
.menu li li ul li a:hover {
background: red;
}
.menu li ul li:hover a {
background: red;
}
With this one:
.menu li li ul li>a:hover {
background: red;
}
.menu li ul li:hover>a {
background: red;
}
Here is updated jsFiddle: http://jsfiddle.net/SWF6w/2/
Related
I have the following HTML code
<div>
<nav>
<ul>
<li >A</li>
<li class="selected">B</li>
<li >C</li>
</ul>
</nav>
</div>
and the following CSS code
div nav ul li {
background: blue;
color: white;
}
div nav ul li.selected {
color: black;
}
running on JSFiddle.
The white foreground color for text content entries "A", "B", and "C" is only showing up on the bullets. This is because as this post illustrates, when an href attribute is present the color attribute is not inherited by the a tag.
However I don't understand how the color value for "div nav ul li a" interacts with
(the pseudoselectors)[http://www.w3schools.com/css/css_pseudo_classes.asp] "div nav ul li a:link", "div nav ul li a:visited", "div nav ul li a:hover", and "div nav ul li a:active".
Because a tags have default color set by the browser (unlike p,span,div) so you have to set the color for the a tag.
div nav ul li {
background: blue;
color: white;
}
div nav ul li a {
color: white;
text-decoration:none;
}
div nav ul li.selected {
color: black;
}
div nav ul li.selected a{
color: black;
}
The color is not inherited by the a element becasuse you stopped at the li level. div nav ul li
This will only get the li element not the a element. If you want the a element
div nav ul li a{
//CSS properties for the a element
}
2.The Psuedoselectors deal with an elements state and how it looks in that state. For instance if you wanted to change how your a element looks on hover you would do something like :
div nav ul li a:hover{
color: orange;
//CSS properties for the a element after hover
}
The reason why this div nav ul li { color: white; } doesn't work is because that's for text inside the li, you need to target the link like this div nav ul li a { color: white; }
Take a look at the updated fiddle. Here you can see the effects of the link pseudo classes.
And here's a good article about them. W3Schools isn't the best resource.
See this fiddle
Add
div nav ul li a {
color: white;
}
to your CSS
In your CSS, you gave a style only for the <li>s and not for the <a>s inside the <li>s.
Please see this fiddle to see the effects created by four of the pseudo-selectors.
a:link - to specify style for the unvisited link
a:visited - to specify style for the visited link
a:hover - to specify style on mouse over
a:active - to specify style on link selected
I have some css I am working with, some links to be exact that have some :before on them for some aditional styling, I want the before to change background color when I hover on the .
Here's my poor attempt at it:
nav > li > a:hover a:before {
background-color: #fff
}
I just want to change the background color of the a:before when i hover over the a.
Thanks!!
Try joining them together like this:
nav > li > a:hover:before {
background-color: #fff;
}
This may also work for you.
nav > li > a:hover::before { background-color: #fff; }
Here is my Codepen demo which I want to show like image snap below the link:
Codepen Demo
Snap:
I used this css:
.menu > ul > li:first-child {
color: red !important;
}
To make left most link Red but still it shows Grey line.
Actually it should look like this:
Problem 2:
The length of the line above alert box should span to entire width of the page. How to do this?
I tried with chaging:
.menu > ul {
display: block;
list-style: none;
border-bottom: 0.1em solid #9e9e9e;
width: 152%; // makig it 200% increase width of entire page. Rather I want to increase the width of lie only
margin-left: -2%;
}
Try this
.menu > ul > li:first-child a {
color: red !important;
}
DEMO
Your code is fine, the only issue is that the a is getting overrid by the color from actual properties for the hyperlink as
a {
// properties..
}
Change the code to this:
.menu > ul > li:first-child a {
color: red !important;
}
Which will apply the settings to the hyperlink of the left most list item under the un ordered list in the element with class menu! :)
You forgot to add anchor selector at the end of:
.menu > ul > li:first-child a {
color: red !important;
}
Here is the entire code for my menu. I'm not posting it here again for clarity.
Some code explanation:
id="onlink" means the link is clicked. The page is active.
What I want is when MENU is onlink, its entire submenu (here both: submenu and submenu2) should become visible too (note we have not clicked any particular submenu).
Is it possible to establish such dependency in pure css?
So far the submenu only pops up on menu hover and disappears after it.
I think you are looking to get the submenus to be hovered as well even after the MENU is not ONLINK. Here is a solution. Hope this is what you are looking for. I used the opacity css property.
#menu li ul.sub-menu {
opacity: 0;
position:absolute;
}
#menu li ul.sub-menu a {
border: none;
background: none;
display: block;
}
#menu li:hover .sub-menu {
opacity:1;
width: 150px;
text-align: center;
}
here is a fiddle http://jsfiddle.net/Y8pnm/2/
Just expand your selector to include every .sub-menu which is after #onlink using the General sibling selector (~).
#menu li:hover .sub-menu,
#menu #onlink ~ .sub-menu {
display:block;
width: 150px;
text-align: center;
}
jsFiddle Demo
You could make MENU and it's submenu share the same class and then use
.class:hover {
// Your CSS code
}
I am creating a dropdown menu for a Wordpress template and I want the main menuitem to have the same color the subitems have when they are hovered. I found many similar questions here on stack overflow and tried their solutions but they don't seem to work in my case.
I think the solution must be:
parent:hover child { ... }
and it works for example here.
I tried to do the same with my code (please see last CSS selector) but it doesn't work here.
Update your CSS from:
#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}
To
#menu ul li:hover a {
background-color: #006699;
}
#menu ul li a:hover {
color: #FFFFFF;
}
Updated example on jsFiddle.
You can get the effect you'd like by replacing the last CSS declaration in your fiddle with this:
.menu ul li:hover > a {
background-color: #006699;
color: #fff !important;
}