Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless
Related
I'm learning CSS and busy with an example that I cannot figure out.
I want to have the background of my element 'active' in the color green.
The element is a link in a navigation menu.
This is the HTML content of the element
And here is the CSS
Could you please let me know, what i did wrong so i can learn from it?
Thanks a lot!
The problem is that you are setting background of li element but the a tag is over it. so use this instead:
li.active a{
background-color:#00CC33;
color:blue;
border-color:#00CC33;
}
If you are using a class like you are you need to use .active instead of #active. Using # indicates an id not a class.
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
I am trying to create level 2 drop-drop down. I came bit close and stucked. Please assist me to complete it.
Here is the JsBin
li{list-style:none;line-height:30px;}
a{text-decoration:none;color:#c3c3c3;font-family:consolas;width:100%;}
a:hover{color:white;}
li{padding:5px;background-color:#5970B2;}
/*li*/a:hover{background-color:grey;}
ul#sddm{position:relative;}
ul#sddm ul{display:none;}
ul#sddm>li{float:left;}
ul#sddm>li:hover>ul
{white-space: nowrap;display:block;position:absolute;margin:0;padding:0;}
ul#sddm ul li:hover ul
{white-space: nowrap;display:block;margin-left:150px;
position:absolute;margin-top:0;padding:0;}
ul#sddm ul li:hover ul>li{}
It will be good for me, if someone explain what I was doing wrong..
Thanks in advance.
Here is the fiddle for demo http://jsfiddle.net/dineshswami/4pLt3/1/
Changes in css:
a{text-decoration:none;color:#c3c3c3;font-family:consolas; display:block;padding:2px;}
ul#sddm>li{float:left; position:relative;}
ul#sddm ul li:hover ul{white-space: nowrap;display:block;margin-left:150px;position:absolute;margin-top:0;padding:0;left:-2px;margin-top:-39px;}
Changes in html: I removed inline css
Problem: The problem was you was forcing the elements by giving inline css so they was not align properly where they want to be. Little changes in position where you mention absolute. So i change the left and top value you can see in css above.
As i mentioned the problem above, let me explain in detail:
To expand the the <a> tag to the entire width of <li> tag i just removed the css width: 100%; and add new css rules display:block;padding:2px;
To adjust the first drop down width i removed the entire inline css from html. so all elements are able to take entire width on basis of text.
To adjust the second level drop down i set the top and left properties to left:-2px;margin-top:-39px; Why i did this because there was a gap between in first level drop down and second level and margin-top to -39px because you have given line-height:30px; which is increasing the height so i have set the margin-top.
Change top and left properties to adjust
I have edited jsdin
I'm trying to make a default hover effect for all my inline menus but the hover effect are not covering the entirely "li a" element.
I've put the code below to ilustrate the problem.
http://jsfiddle.net/yWqK4/
You are modifying the <a> tag to a block disaply and doing all other kind of unnecessary things.
The only thing you need to do, is to change the background color of your element.
Replace your CSS that is used for the hover effect with:
.Menu li a:hover {
background-color: rgba(0,0,0,0.3);
}
and it is working as expected. See http://jsfiddle.net/muNFY/
you don't need use :before to get desirable result. Fixed tour styles here http://jsfiddle.net/yWqK4/2/
i have this menu schema:
<nav>
<ul>
<li>home</li>
<li>coleção</li>
<li>downloads</li>
<li>contato</li>
</ul>
</nav>
My LI is float:left so, the itens are side by side. i want when i hover the a:hover my background LI, and a color changes.
See this fiddle: http://jsfiddle.net/56wUm/
If you hover only on li, the link dont work and the a dont change the color!
ty for help!
If you still need help, I would suggest adding the padding to the a element in css rather than li. For example something like this: http://jsfiddle.net/MGRBS/2/
That way the link takes up the entire block space, Good luck. :D
You should prefer using CSS Sprites to happen that. refer to these links
vid link
http://css-tricks.com/css-sprites/
To fix exactly what is going on, you need to change your a:hover rule slightly:
ul li:hover a { color: #fff }
See: http://jsfiddle.net/56wUm/4/
However, in terms of usability, I think you'd be better off making the links take up all of the menu space, making a large target.
You want to move some of that CSS from the A to the LI. The goal is to get the A to butt right up against the LI so there's no gap. You just want to use the LI's for their floating property, think of them like TDs in a TABLE. They should have no real style of their own.