In css how would I change on hover the color of test 1 but not color of list 1, 2,3?
<ul>
<li>
test 1
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
One way is to specify the "default" color:
li:hover {
color:#f00;
}
li, li:hover li {
color:#000;
}
http://jsfiddle.net/D8dwt/1/
Another (cheat?) is to use more markup to wrap the content you want styled on hover:
li:hover span {
color:#f00;
}
<ul>
<li>
<span>test 1</span>
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
This is one way to go:
ul > li {
color: red;
}
ul > li:hover {
color: blue;
}
ul > li:hover > ul > li {
color: red;
}
Add test1 into a div element so that it is in a separate leaf.
css:
div:hover {
color: blue;
}
Although there may be a way to do this without modifiying the html..
Give it it's own class and define it in your CSS file.
<li class="yourclass">
Or put it in tags and define the link in your CSS
li.yourclass a:hover {
text-decoration: underline ;
}
Related
In my <ul> list I have several <li> with <a> tags in them.
I want to change the color of the li bullet icons when hovering on the <a> tag (I mean bullets beside <li>)
I tried
a:hover {
color:red;
}
but it doesn't affect the<li> bullet icon.
I also tried
ul li:hover{
color:red;
}
But it doesn't work perfectly because when mouse move to near <a> tag and not on it <li> and the bullets starts to change color.
your code actually worked for me.
<ul>
<li>
A
</li>
<li>
B
</li>
<li>
C
</li>
</ul>
CSS:
ul li:hover{
color:red;
}
Fiddle: https://jsfiddle.net/tox9je8n/
I have tried something related to your question and it works fine. To fix the issue of li:hover not hovering link, you should set to display:block, as below, so that it takes full width.
ul li a {
color: black;
display: block
}
ul li:hover {
color: red;
}
ul li:hover a {
color: black;
}
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
Hi I have a basic menu for which I would like to add a submenu, that appears only when a certain menu link is hovered. Everything I have tried does not hide the submenu when a link is not hovered. Here is my code:
CSS
.navmenu{
float:right;
font-size: 13px;
font-weight:400;
text-transform: uppercase;
}
.navmenu li{
position: relative;
display: inline-block;
float: left;
}
.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}
.navmenu li a:hover{
background:#36332e;
}
.active a{
background:#36332e;
}
HTML
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>Sub Link 1</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
You need to initially hide the menu:
.navmenu li ul { display: none; }
and then display it when you hover over the nav item:
.navmenu li:hover ul { display: none; }
You should also be careful about defining styles that target .navmenu li or .navmenu li a because those will also target your submenu. You should instead use child selectors, giving you more control over the non-submenu links, so your selectors will look like:
.navmenu > li
.navmenu > li > a
I've encorperated some of those changes into this JSFiddle to get you started:
http://jsfiddle.net/Wexcode/B5P26/
Edit:
This is actually going to lose it's hover state when you hover over the submenu links:
.navmenu > li > a:hover {
background:#36332e;
}
Instead, you should do this:
.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }
Since the <ul> is nested inside the <li> element, you won't lose the hover state when you hover over the submenu links. I updated the fiddle to reflect these changes.
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>
Sub Link 1
<ul>
</li> <a href=# >hi hi hi</a>
<ul>
<li>hello hello hello</li>
<li>hello hello hello</li>
<li>hello hello hello</li>
</ul>
</li>
</li><a href=# >hi hi hi</a> </li>
</li> <a href=# >hi hi hi</a> </li>
</ul>
</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
I guess I am not getting css child combinators.
I am trying to target just the first level on the li's with the following:
ul > li { color: green; }
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1 </li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
http://jsfiddle.net/5vB3h/
NOTE: I also tried removing the spaces between >, with no luck.
You're using them fine, but all (properly marked-up) <li>s are children of <ul>s. You can specify the parent (in your jsFiddle, body):
body > ul > li
Or reverse the styles with the more specific case:
li ul > li {
color: black;
}
In the case of color, you need to use the second option anyways, because color is inherited. Here's the updated jsFiddle.
Your rule targets the child list items of any list. What you can do is create a second rule to recolor the other sub list items. For example:
ul > li {
color: green;
}
li li {
color:black
}
jsFiddle example
ul will match all the <ul> elements. Since every <li> is a child of one of the <ul>s…
You need to be more specific about which <ul> you mean. Perhaps add a class to it.
ul > li will select all the li elements in your document because they are all the children of ul elements.
If you apply a class to the parent like <ul class="top">, then you can use ul.top > li.
Add a class
li {color: blue;}
/* ^ added because maybe initial property is color: inherit;
If not, someone correct me */
ul.a > li { color: red; }
After this, add class to ul like <ul class="a" ...
http://jsfiddle.net/5vB3h/7/
EDIT (worked it out):
Okay so I ballsed up. Below is wrong.
ul:first-child > li { color: green; }
I found that when applying:
div>ul>li{color:green}
all lis went green... turns out that the li magically inherit the color of the li (odd behaviour as I assume the content had color:#000)
anyway... You need to explicitly set the color: to soemthing other than green to see the style working.
fiddle here
//html
<div>
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
</div>
//css
li {color:black} //you have to have this (or something like * {color:black} OR body/html {color:black} as li seem to automatically inherit parent li color property
div>ul>li{ color: green; } //have to have parent.
I want to build CSS drop down menus.
I want to solve the problem of too long drop down items in UL. So I want to use DIV within a UL.
If you run this example, heading 3 will show you drop down UL items. I want the same for Heading 2 link. Because I put that UL in a DIV. So how can I do it?
CSS Code:
li{
list-style: none;
float: left;
}
li ul {
display: none;
background-color: #69f;
}
li:hover > div#mDiv {
display: block;
}
.menuDiv{
display: none;
}
li:hover > ul {
display: block;
}
Markup:
<ul>
<li>Heading 1</li>
<li>Heading 2
<div class = "menuDiv" id = "mDiv">
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
</li>
<li>Heading 3
<ul>
<li>Subitem 4</li>
<li>Subitem 5</li>
<li>Subitem 6</li>
</ul>
</li>
</ul>
Get rid of the > combinator so the inner uls get picked up whether they're in a containing div or not:
li:hover ul {
display: block;
}
If the > in your rules is required change this rule:
li:hover > div ul, li:hover > ul {
display: block;
}
Your problem is that because of your css, the div is shown on :hover, but the inner ul is not.
So you can use #BoltClock's solution or change:
li ul {
display: none;
background-color: #69f;
}
to:
li ul {
background-color: #69f;
}
li > ul {
display: none;
}
I have a nested UL navigation list, with ul's contained inside some other li elements. here's the mark up:
<ul class="navigation">
<li>No Chidren</li>
<li>With Chilren
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
I tried styling it with some of the following CSS declarations:
.navigation {
//stylings
}
.navigation li{
//stylings
}
.navigation li a{
//stylings
}
.navigation li a:hover{
//stylings
}
but the .navigation li affects all of the list elements, including the children. is there a way to target the lis so that the styles are only applied to the top-level ones, and not the children?
As others have mentioned, the > selector will only select direct children. However, this doesn't work in IE 6.
If you need to support IE 6, you can add a class to child uls or lis, and use that to remove the styling cascading from the top li:
<ul class="navigation">
<li>No Chidren</li>
<li>With Chilren
<ul class="level1">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
--
.navigation li{
background: url(bg.png);
}
.navigation .level1 li{
background: none;
}
Like this, the ">" states that the li must be a direct child of .navigation
.navigation {
//stylings
}
.navigation > li{
//stylings
}
.navigation > li a{
//stylings
}
.navigation > li a:hover{
//stylings
}
Yes, it is possible with child selectors.
.navigation>li>a{
//stylings
}
Code above will affect "No Chidren" and "With Chilren" link but not "child 1" element.
Here is working example: http://jsfiddle.net/VuNwX/
And here you can read more about selectors: http://css.maxdesign.com.au/selectutorial/index.htm