I am currently trying to change the properties of another object in css but am not sure if I am doing this right. Any help would be appreciated.
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover ~ ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
~ is a "general sibling selector", so it will match any element that is a sibling that comes after the element on the left side of the selector.
With your markup, you either just want to remove ~ to target any ul.drop-menu that is a child of li, or if you want the direct descendent, change it to a >. I'm assuming you want the latter, in case you nest multiple .drop-menu's in li's. I added another nested menu and changed your selector a little to demonstrate that.
ul.drop-menu {
opacity: 0.1;
}
nav > ul li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
You have to use > instead of ~. Please check this:
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
Related
I have this simple HTML
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
And this simple CSS
<style>
.sub-items {
display: none;
}
.item:hover .sub-items {
display: block;
}
</style>
This works in desktop, however, in mobile, when you touch on the second or third parent you automatically open the child url. How could I avoid this without using javascript?
Thanks in advance
According to mobile device hover features work as click or active events so better approach is .item:active .sub-items { display: block;} can we use through media query
.sub-items {
display: none;
}
#media only screen and (max-width:1240px) {
.item:hover .sub-items {
display: block;
}
}
#media only screen and (max-width:480px) {
.item:active .sub-items {
display: block;
color:red
}
}
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
I have a div like below i need to align the 3 ul which is inside the li in single row using css.
<div id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount"></li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount"></li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"></li>
</ul>
</li>
</div>
As like this
try to this code
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
Or this like
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
#printEmilCountDiv ul li{display:inline-block;vertical-align:top;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
You may remove the first li and replace it with div. Then apply a styling like;
ul{
margin-top: 0;
margin-bottom: 0;
}
Which trims the margin. Here is a demo
And you may add float: left; to either ul or li to align them in a row, like this
How can I select only the first parents ul (here with the class selectMe), with or without a <div> between the <nav> and them ?
I need to do it without any class in the ul.
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
.
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
How about using a different selectors for every case, and combining the both?
Case 1: Select only the first parents <ul> without <div>:
nav > ul
Note that > mean the child in the immidiate next level below.
Case 2: Select only the first parents <ul> with <div>:
nav > div > ul
Combining both cases: You can use both of these combined by adding a ,:
nav > ul, nav > div > ul
Without the class you'll need two selectors:
nav > ul,
nav > div > ul {
...
}
> here is the Child Combinator selector, which selects the direct children. This means the inner ul contained within your top-level ul will not get selected.
Example 1 (nav only)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
Example 2 (nav and div)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
In fact I have to select all the ul in top level and not ul in ul
This is exactly what this does. In both of the above examples only the outer ul element has a border:
If both ul elements were selected, both would have the border and it would instead look like this:
This is my list
<ul class="list-inline row ">
<li href="#" style="color:white"> Registrate </li >
<li style="list-style-type:square; color:white" href="#">Quienes Somos </li>
<li style="list-style-type:square; color:white" href="#" style="color:white">Contacto </li >
</ul>
This is my CSS
.list-inline { padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
I get the text and the color but I don't get the square!
list-style-type:square must go in your ul tag.
<ul class="list-inline row" style="list-style-type:square;">
http://www.w3.org/wiki/CSS/Properties/list-style
Set the list-style-type on the ul element rather than the li elements.
<ul class="list-inline row " style="list-style-type: square;">
<li style="color:white"> Registrate </li >
<li style="color:white">Quienes Somos </li>
<li style="color:white">Contacto </li >
</ul>
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