Changing the color of a div - HTML - html

I have a dropdown menu with a sub-menu, made up of lists:
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
My CSS changes the background-color of these items when hovered on.
What I want to do is keep Item 2's background color changed whilst hovering over any give Sub Item
Any simple way to do this?
CSS:
.list_item:hover {
background-color:green;
}
.sub_list_item:hover {
background-color:yellow;
}


Wrap item 2 around its <ul> tag
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
</li>
<li class="list_item">Item 3</li>
</ul>


You could use the direct child selector > to target a specific li as opposed any given li or ul.
jsFiddle here - menu I made a few weeks ago
Usage example:
#menu > ul > li:hover {
background: #2580a2;
}


Change the code and css
<ul class="item">
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
CSS is
.item
{
color: #000000;
list-style-type: disc;
}
.item li:hover
{
color: #FFFFFF;
background-color: #336600;
}
.item ul li:hover
{
color: #FFFFFF;
background-color: #FF0000;
}
Enjoy ... and choose your color whatever you like
for more detail visit ..
http://www.mr-sudhir.com/blog/what-is-css.aspx

Related

Change css property of all the other elements li of a list (ul) while hovering an element

I really want to know if it's possible to change a property of all the other elements of a list while hovering one element of it.
Let's say that when I hover the "element 2", I want the others: "element 1", "element 3" and "element 4" css color property to change to "red" but not the hovered one.
Is it something possible just with css? is there a css selector for that actual feature?
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 3</li>
<li class="element">element 4</li>
<ul>

You can change the color of all li children by using the pseudo class :hover on the parent ul.
Then you just need to override the child currently hovered and set it back to the original color:
ul:hover > li {
color: red;
}
ul > li:hover {
color: black;
}
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>

You can try by using parent selector
ul:hover li { color:red; }
ul li:hover { color:white;} // that should be default color

The shortest and most elegant solution uses the :not selector:
#list:hover .element:not(:hover) {color: red}
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 3</li>
<li class="element">element 4</li>
<ul>

Yes it's possible with :not negation pseudo class.
#list > .element:not(:hover) {
color: red;
}
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 3</li>
<li class="element">element 4</li>
<ul>

Try this
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 2</li>
<li class="element">element 4</li>
<ul>
<style>
#list:hover{
color:red;
}
.element:hover {
color: black; /* Replace black with Default color */
}
</style>
This worked for me

Can't traverse up the DOM with CSS but for your example you can fake it like this..
#list {
background-color: gray;
list-style-type: none;
padding: 0;
}
#list:hover {
background-color: red;
}
.element:hover {
background-color: gray;
}
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 2</li>
<li class="element">element 4</li>
</ul>
fiddle
https://jsfiddle.net/Hastig/u4w0z4sn/
Here's another way to fake it (affect an element that is above it on the page, but not in the dom). It doesn't apply in this case but may be worth mentioning for future readers.

It's possible to target all siblings that follow the element you're currently hovering over using the general sibling selector (~):
ul > li:hover ~ li {
color: red;
}
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 3</li>
<li class="element">element 4</li>
</ul>
You can also use the adjacent sibling combinator (+) to target the sibling element that immediately follows the element you're currently hovering over:
ul > li:hover + li {
color: red;
}
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 3</li>
<li class="element">element 4</li>
</ul>
Unfortunately it is not possible to target previous siblings, so you cannot target element 2 and highlight element 1, for example.
However, one solution might be to instead apply the hover to the <ul>, and simply 'reset' the hovered <li> to default with color: inherit:
ul:hover > li {
color: red;
}
ul:hover > li:hover {
color: inherit;
}
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 3</li>
<li class="element">element 4</li>
</ul>
Another solution (and perhaps the most elegant) would be to make use of the :not pseudo-class:
ul > li:not(:hover) {
color: red;
}
<ul id="list">
<li class="element">element 1</li>
<li class="element">element 2</li>
<li class="element">element 3</li>
<li class="element">element 4</li>
</ul>
Keep in mind that :not is not supported in Internet Explorer 8 and earlier.

How to display a ul list from left using Bootstrap?

On mouseover of Diveagar category one drop down list is displayed but it displays from that div only.
I want to display it from left Ex: from "Quick look" tab, I have used the following code to display the div when mouse is over.
<ul class="nav pull-left">
<li class="dropdown">
<p>
<a href="#" class="dropdown-toggle " style="color:black;" data-toggle="dropdown"><?php echo $sub_desti_res["sub_destination"]; ?><br> 2 Packages Available
</a>
</p>
<ul class="dropdown-menu">
<li>
<div class="destination-list">
<div class="col-md-12">

You mean like this?
* {margin: 0; padding: 0; list-style: none;}
.menu {display: block; text-align: center;}
.menu a {display: block; text-decoration: none; color: #333; border: 1px solid #999; padding: 5px; }
.menu > li {display: inline-block; position: relative; width: 100px;}
.menu ul {position: absolute; width: 150px; left: -25px; display: none;}
.menu > li:hover ul {display: block;}
<ul class="menu">
<li>
Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 5
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>

Put this CSS style:
.nav {position: relative;}
.dropdown-menu {position:absolute;left:0;width:100%;}

Change CSS menu heading hover attribute to orange while hovering

How can I make the menu-category color attribute change to orange when hovered and NOT remain orange while hovering other child items? Is this too tricky or am I not being clear enough? Please let me know. Thank you for help.
jsFiddle: http://jsfiddle.net/LmWk2/
<nav class="main-nav">
<ul>
<li class="menu-category">Title 1
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
<li class="menu-category">Title 2
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
<li class="menu-item">Item 5</li>
</ul>
</li>
<li class="menu-category">Title 3
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
<li class="menu-item">Item 5</li>
</ul>
</li>
<li class="menu-category">Title 4
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
</ul>
</nav>

The simplest way would be to add another element that wraps only the title:
<li class="menu-category"><span class="menu-category-title">Title 1</span>
.menu-category-title:hover {
color: orange;
}
http://jsfiddle.net/ExplosionPIlls/LmWk2/1/ (for TITLE1)

My answer addresses the color-change-on-hover issue and the related issue of making the links behave like buttons (block like) instead of text links.
As pointed out by a previous post, it is a good idea to wrap the title tag in a container, I chose h4 but almost anything will do. Also, for semantic reasons, but the link tags inside the list-item tags:
<nav class="main-nav">
<ul>
<li class="menu-category"><h4>Title 1</h4>
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
...
...
...
</ul>
</nav>
The essential changes to the CSS are as follows.
For the title text:
.main-nav ul li.menu-category h4 {
margin: 0;
display: inline-block;
padding:5px 15px 8px 15px;
font-weight: normal;
}
.main-nav ul li.menu-category h4:hover {
color:#FB8521;
}
The trick here is to set display: inline-block to the element wrapping the title text. Because I chose to use h4, I needed to zero out the margin and set the font-weight to normal to keep with your previous styling. Also, add padding to make the text area large so you can trigger the hover effect without actually mousing over the text.
For the sub-menu items, set the a tags to have display: block, that way the link's active area fills up the width of the sub-menu panel. Add padding as needed.
.menu-category .menu-item a {
display: block;
padding: 5px 15px;
}
.menu-category .menu-item a:hover {
color:#FB8521;
}
You can see the working demo at: http://jsfiddle.net/audetwebdesign/jvgkG/
PS
There is flexibility in this layout with regards to how the hover works. I assumed that the title text reverts to white when you mouse onto the secondary menu items, but I could set it up so that the title remains orange as you move over the secondary menu.
Also, you can style the default link color as you see fit.

How do I properly use display:block on this menu?

Code:
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services</li>
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
</div>
For CSS: I am using display:none on .the_one. Now once the services tab is hovered I want to then display .the_one. How can I do this? I tried doing:
li.the_one:hover {
display:block;
}
But that doesn't work either.

Your HTML is not valid. <ul> must have only <li> as children (and that includes other <ul>. Once you fix that, add these rules:
.the_one {
display: none;
}
.one_one:hover .the_one {
display: block;
}
http://jsfiddle.net/xvEvj/

You need to target the the inner list in your css to make it appear.
Change your css as below:
li.the_one:hover ul.the_one
{
display:block
}
the "li.the_one:hover" states that this will occur when the li with the class "the_one" is hovered over, then it applies a display:block to the ul with the class "the_one" inside the list item with the class "the_one".
Hope this helps.
Cheers.

Your HTML is not valid.
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
</li>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
The second unordered list should rest within a list item of the first unordered list.

Three level CSS menu with first layer in horizontal layout

What I'm after is to have the top level ul lis laid out horizontally, and then subsequent levels laid out vertically, preferably indented slightly as levels go down, under their parent li.
Not after any hover functionality, just a nice layout, something like this:
Top Item 1 Top Item 2 Top Item 3
sub item 1 sub item 1 sub item 1
sub item 2 sub item 2 sub item 2
sub sub item 1 sub item 3 sub item 3
sub sub item 2 sub item 4 sub item 4
sub item 5 sub item 5 sub item 5

How about this:
Live Demo
CSS:
#footer {
overflow: auto;
background: #ddd
}
.outer {
list-style: none;
width: 33%;
float: left;
margin: 0;
padding: 0
}
.first {
font-weight: bold
}
.outer ul {
list-style: none;
margin: 0;
padding: 0 0 0 18px
}
HTML:
<div id="footer">
<ul class="outer">
<li class="first">Top Item 1</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 3</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
</div>

here is a copy-paste stuff to play with:
<html>
<head>
<style>
li.level1 { float: left; display: inline; margin-right: 20px }
ul.level2 { display: inline }
li.level2 { display: block; padding-left: 20px }
ul.level3 { display: inline }
li.level3 { display: block; padding-left: 20px }
</style>
</head>
<body>
<ul class="level1">
<li class="level1">apple</li>
<li class="level1">banana
<ul class="level2">
<li class="level2">banana 1
<ul class="level3">
<li class="level3">banana 1 A</li>
<li class="level3">banana 1 B</li>
</ul>
</li>
<li class="level2">banana 2</li>
</ul>
</li>
<li class="level1">cherry
<ul class="level2">
<li class="level2">cherry 1</li>
<li class="level2">cherry 2</li>
</ul>
</li>
<li class="level1">dddd</li>
</ul>
</body>
</html>

Or if you want something pure css then how about something like this:
http://jsfiddle.net/pLFqd/2/
Edit: Missed the bit about not wanting hover functionality, try simple example attached