I have the following html
<ul>
<li class="main"> Main 1
<ul>
<li class="sub">Sub 1</li>
<li class="sub">Sub 2</li>
<li class="sub">Sub 3</li>
</ul>
</li>
<li class="main"> Main 2 </li>
<li class="main">Main 3 </li>
</ul>
I want the background-color of the first level change on mouse over. But when I try this code
.main:hover {
background-color: red;
}
.sub:hover {
background-color: none;
}
The sublevel menu also gets changed. Is there a way to change only the background of the outside element.
This code can be seen in action in this codepen.
http://codepen.io/anon/pen/Bvauf
What you're seeing is the background of .main, because the children's backgrounds are transparent. You could explicitly set it to white:
.main:hover {
background-color: red;
}
.main:hover > ul {
background-color: #fff;
}
Or
.main ul {
background-color: #fff;
}
.sub {
background-color: white;
}
You should go with setting background colors to ul and not li as others have suggested
Related
The following is a TOC I have implemented on an instance of Confluence.
It's look has been customized so that when hovering over a menu item with the mouse, the corresponding menu item is highlighted as in the case of the 2. Navigation Bar menu item in the above image.
The hover effect is achieved via the following CSS code:
.toc-link:hover {
background-color: #e5e5e5;
text-decoration: none;
}
I'd like for the hover effect to span the entire width of the box though, similar to the image below:
What property would I have to insert into my CSS code to achieve the desired effect?
Thank you.
This can be achieved by setting display:block on your <a> element. The hover styles should be on your anchor tag, not on your <li>, for example:
a {
display: block;
text-decoration: none;
}
a:hover {
background-color: #e5e5e5;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
If your list items do not have an anchor tag inside, you can achieve it like so:
li {
display: block;
}
li:hover {
background-color: #e5e5e5;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
You can try this:
#content {
border: 1px solid #DDDDDD;
background-color: #F6F6F6;
padding-right: 25px;
}
li{
padding: 5px;
list-style: none;
}
li:before {
content: "• ";
color: #ABADBB;
}
li:hover {
background-color: #DDDDDD;
}
<div id="content">
<ul>
<li>
Opening the Asset Browser
</li>
<ul>
<li>1. Menu</li>
<li>2. Navigation Bar</li>
<li>3. Folder Tree</li>
<li>4. Search Result Pane</li>
</ul>
<li>
Live Updates for Asset Resources Selectors
</li>
<li>
Texture Tool-tips
</li>
</ul>
</div>
Could you tell me how to bring menu's black background in front of the body text on the image below.
Here is JSFiddle link:
https://jsfiddle.net/johnking/j58cubux/6/
When you scroll down, the menu is not properly visible
<body>
<div class="uppersection">
<div class="menu" id="home">
<ul>
<li>
Home
</li>
<li class="drop">
About
<ul class="haha">
<li>Who am I?</li>
<li>Accomplishments</li>
<li>Academic Work</li>
<li>Future Plans</li>
</ul>
</li>
<li>
Resume
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class=textupper>Hello, I am John <br><br>Welcome To My Website!<br> <br>Feel Free To Navigate Around</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Hi</body>
How can I fix the problem using css?
Thanks.
You need to add background for a too in case if parent li is hovered:
.menu ul li:hover a {
background-color: #00AFF0;
}
Demo: https://jsfiddle.net/j58cubux/7/
Or better solution is to set a background color to transparent by default:
.menu ul li a {
text-decoration: none;
color: white;
font-size: 21px;
text-align: center;
font-family: Segoe UI Local;
background-color: transparent; /* make it transparent */
}
Demo: https://jsfiddle.net/j58cubux/8/
Your menu a has a black background that is showing up above the blue background of the li.
Just remove that black background (remove this line):
background-color: black;
from your .menu ul li a definition.
JSFiddle: https://jsfiddle.net/j58cubux/10/
use the property "z-index: 1000;" in ".menu". So fix the menu at the top regardless of the scrolling content.
.menu {
background-color: black;
min-height: 77px;
width: 100%;
position: fixed;
z-index: 1000;
}
See you later!
I have a fiddle here http://jsfiddle.net/13v2fcjf/
It has a basic html document with lists and sublists
<ul>
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
</ul>
And I'm using the following css -
li:hover {
background: #f7f7f7;
}
When I hover on an li item with a subitem(s), all the subitems also get highlighted. This is not desirable. I want only the list item on which the user's hovering to be highlighted. How can I achieve this ?
Also, I tried using the :not selector but it doesn't work.
I think you just need to set the background on the nested <ul> tag. Something like this:
li:hover > ul {
background: #fff;
}
Edit: this is assuming you only want the parent <li> highlighted, which as #j08691 points out in the comments, might not be entirely what you're after. If you want each <li> to be highlighted, you might have to modify your HTML slightly to make this easier:
<ul>
<li><a>Item 1</a>
<ul>
<li><a>Sub Item 1</a></li>
<li><a>Sub Item 2</a></li>
<li><a>Sub Item 3</a></li>
</ul>
</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a>
<ul>
<li><a>Child 1</a></li>
<li><a>Child 2</a></li>
<li><a>Child 3</a></li>
</ul>
</li>
</ul>
By wrapping the items and sub-items in another tag - here I've just used an <a> tag for the sake of argument - you can target that tag to be highlighted on :hover without the nested tags being affected in the same way as in your original code:
a {
display: inline-block;
padding: 4px;
}
a:hover {
background: #f7f7f7;
cursor: pointer;
}
See http://jsfiddle.net/13v2fcjf/3/
If Ian's option doesn't work for you, a second opotion is to wrap the <li> contents in a span and apply the hover to that, like this example fiddle:
HTML:
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Sub Item 1</span></li>
<li><span>Sub Item 2</span></li>
<li><span>Sub Item 3</span></li>
</ul>
</li>
....
CSS
li span:hover {
background: #f7f7f7;
cursor: pointer;
}
HTH,
-Ted
This effect is just natural because the sub items are inside of the main items.
There are two options that come to my mind:
1.) Resetting the background color of the sub lists with
li:hover > ul {
background-color: white;
}
2.) Using the li items as a container:
<li><span class="highlighted">Item</span></li>
.highlighted:hover {
background-color: red;
}
This was a challenge, but the following CSS works with your existing markup. It highlights only a hovered li, without highlighting its parent.
The main trick is to have the CSS create new content when hovering over a nested li. You can do this using the :before pseudo element:
li li:hover:before {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
z-index: -1;
background: white;
}
(If you're targeting CSS3 browsers only, you can use ::before instead of :before.)
This causes a nested li to cover up its parent li. The negative z-index prevents the background from covering up any text.
Parent li's need relative positioning with a z-index, and nested li's need static positioning for this to work:
li {
position: relative;
z-index: 0;
}
li li {
position: static;
}
The other trick has been mentioned in other posts:
li:hover ul {
background: white;
}
Full CSS:
li {
line-height: 1.65em;
cursor: pointer;
}
li {
position: relative;
z-index: 0;
}
li li {
position: static;
}
li:hover {
background: #def;
}
li:hover ul {
background: white;
}
li li:hover:before {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
z-index: -1;
background: white;
}
Working fiddle
I'm currently trying to create a drop-down menu from nested unordered lists. I have the menu working however I'm having some issues with regards to styling. The overall link that triggers the drop-down is clickable and needs to have a blue background with white text however, the drop-down elements need to have a grey background which is inherited from the overall navigation container. All I need to do is modify the text colour however whatever I method I try it always modifies the drop-down text colour as well as the heading link colour.
My CSS can be found below along with an example of the current display and the html used to generate the menu:
/*CSS*/
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
/*height: 2em;
line-height: 2em;
*/
/*padding: 0 1.5em;*/
text-decoration: none;
color: #ffffff;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu li:hover ul {
display: block;
}
.dropdown a li{
color: #124162 !important;
}
#style_me > li > a{
color: #124162 !important;
}
/HTML/
<nav id="navigation" class="navigation">
<ul>
<li class="current">Home</li>
<li>Who Are We?</li>
<li>Why Join Us?</li>
<li>Contact Us</li>
</ul>
/* This is the menu element that needs styling */
<ul id="coolMenu">
/* THis should be blue background white text */
<li>Login / Register
<ul id="style_me">
/* These should be grey background blue text */
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
</ul>
</nav>
Any help would be greatly appreciated. It's been a couple of years since I've had to do any CSS and my memory is a bit flakey!
This should do what you want:
#style_me li a {
color: #124162 !important;
}
(just spaces instead of >) And, perhaps, you won't need that !important.
Update: try even more specific CSS selector if what you posted is being overridden.
#coolMenu li #style_me li a {
color: #124162 !important;
}
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 ;
}