It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
What is the selector to reach the ul markups highlighted below?
(no class or id is possible i need a selector to the html markup)
Here is my html code:
<div id="mainmenu">
<ul class="menu">
<li class="item-472">
Accueil
</li>
<li class="item-475 current active deeper parent">
Produits
**<ul> <!--Here is the first ul I'm tryin to style --> **
<li class="item-519 deeper parent" >
<h3>Fenêtres</h3>
<p>PVC</p>
Fenêtres
** <ul> <!-- the second ul to style -->**
<li class="item-521 deeper parent">
PVC
<ul >
<li class="item-522">Arcade</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
There are a number of ways to style these unordered lists, depending on how specific you want your selectors to be. I have created a somewhat comprehensive list below.
Ways to select the first ul:
ul
li ul
ul li ul
ul .item-475 ul
ul .current ul
ul .active ul
ul .deeper ul
ul .parent ul
Ways to select the second ul:
ul ul
li ul ul
ul li ul ul
ul .item-475 ul ul
ul .current ul ul
ul .active ul ul
ul .deeper ul ul
ul .parent ul ul
IMPORTANT: Be sure that the second ul is either as specific or more specific than the first ul. Otherwise, the style of the first ul will be applied to the second ul.
For example, this would work:
li ul {
/* styles here */
}
ul .current ul ul {
/* styles here */
}
But this would NOT work:
ul .current ul {
/* styles here */
}
ul ul {
/* styles here */
}
first one:
li.active ul
second one:
li.active ul ul
http://jsfiddle.net/YYsZ3/
Related
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}
1) what is the difference between "li.hover" and "li:hover"?
2) what does "ul ul li" even mean? why are there 2 "ul" elements?
li.hover is targeting an li element that also has a class of hover, for example:
<li class="hover"></li>
li:hover is targeting the hovered state of any li element.
ul ul li is targeting any li elements that reside in a ul element that resides inside another ul element, like so:
<ul>
<li>
<ul>
<li>This is the element that would be targeted</li>
</ul>
</li>
</ul>
.hover is a class identifier
:hover denotes the action of mouseOver
1)
li.hover is a defined class. You can use it like <li class="hover">.
li:hover defines the hover state. It will appear if you hover an element with your cursor.
2)
ul ul li : The second ul styles a ul in an available ul. It can be used for sublists.
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
1)
li.hover li element which have class hover exp ..
li:hover li element which are being hovered.
2)
ul ul li only li element which have at least ul as ancestors exp:
<ul>
<li>
<ul>
<li>
ME
</li>
</ul>
</li>
</ul>
How to read a syntax like .nav-menu li:hover ul?
How is it different from .nav-menu li ul:hover?
I've searched w3schools but all the examples there are of the latter type.
Can anyone explain?
Below is the code that I've implemented for creating a dropdown submenu.
HTML
<ul class="nav-menu">
<li>Home</li>
<li>Retrievals
<ul class="dropdown-menu">
<li>Data Listing</li>
<li>Web Scheduling</li>
<li>Google Maps Application</li>
</ul>
</li>
<li>Reporting</li>
CSS:
.nav-menu li
{
width: 150px;
float: left;
}
.nav-menu li ul
{
display: none;
}
.nav-menu li:hover ul
{
display: block;
}
.nav-menu li:hover ul
an unordered list
which is a descendant of a hovered list item
which is a descendant of an element that is a member of the nav-meny class
.nav-menu li ul:hover
a hovered unordered list
which is a descendant of a list item
which is a descendant of an element that is a member of the nav-meny class
You'd be unlikely to notice any practical difference with your specific HTML since the only list items you have that contain an unordered list contain nothing except a single unordered list.
First rule: .nav-menu li:hover ul apply css to ul once you hover parent li.
Second rule: .nav-menu li ul:hover apply css to ul once you hover ul element.
Hi I want to select the inner unsorted list without using the class="" argument
I can select the outer list with "ul li {}" but how to select only the inner list
<ul class="listStyleBlueSquare">
<li>outer List element</li>
<li>Headline of inner list:
<ul class="listStyleSquare">
<li>Inner List element</li>
</ul>
</li>
</ul>
Try one of these:
ul li ul li{}
ul ul li{}
li li{}
or with the ">"
ul > li > ul > li{}
ul ul > li{}
Here's a more succinct selector:
li > ul {property: value}
This grabs an unordered list that's a direct child of a list item.
its
ul li ul li{ your-rules: here; }
ul > li > ul >li{ your-rules: here; }
ul ul li { your-rules: here; }
for 1st child
ul ul li:first-child {
your-rules: here;
}
for nth child
ul ul li:nth-child(n) {
your-rules: here;
}
where n belogs to any number.
i reccomend you this:
ul ul li { your-rules: here; }
I recommend giving this a read, it will help you understand the cascade and specificity: LINK
I have a menu structure like this :
<ul class"menu">
<li>
<a>item1</a>
<ul>
<li><a>subitem1</a></li>
<li><a>subitem2</a></li>
<li><a>subitem3</a></li>
<li><a>subitem4</a></li>
<li>
<a>item2</a>
<ul class="sub-ul-2">
<li><a>subitem5</a></li>
<li><a>subitem6</a></li>
<li><a>subitem7</a></li>
<li><a>subitem8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My requirement is, when I hover on item1 then subitem1,subitem2,subitem3,subitem4 only need to display and subitem5 - 8 no need to display.
When I hover on item2, then only subitem5 - 8 need to display. How can I achieve this by using css?
I have tried:
ul.menu ul{
display: none;
}
ul.menu li:hover:first-child ul {
display:block;
}
HTML
<ul class="menu">
<li>
item1
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
<li>subitem4</li>
<li>
item2
<ul>
<li>subitem5</li>
<li>subitem6</li>
<li>subitem7</li>
<li>subitem8</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menu li > ul {
display:none;
}
.menu li:hover > ul {
display:block;
}
LIVE
Something like this? (Without changing your html)
CSS:
ul li ul {display:none;}
ul > li:hover ul{display:block;}
ul li ul > li > ul.sub-ul-2 {display:none;}
ul > li:hover ul > li:hover ul{display:block;}
DEMO 1
Update: (Without using any classes & cursos:pointer;)
ul li ul {display:none;}
ul > li:hover ul{display:block;}
ul > li > ul > li > ul > li{display:none;}
ul > li:hover ul > li:hover ul li{display:block;}
li{cursor:pointer;} /* For the hand (cursor) while hover over the li */
DEMO 2
Or the short css, after fixing the first ul from <ul class"menu"> to <ul class="menu"> (By adding the = to it)
.menu ul {display:none;}
.menu li:hover > ul{display:block;}
li{cursor:pointer;}
DEMO 3
fiddle: http://jsfiddle.net/Z22kH/
html:
<ul class="menu">
<li>
<a>item1</a>
<ul class="sub-ul-1">
<li><a>subitem1</a></li>
<li><a>subitem2</a></li>
<li><a>subitem3</a></li>
<li><a>subitem4</a></li>
<li>
<a>item2</a>
<ul class="sub-ul-2">
<li><a>subitem5</a></li>
<li><a>subitem6</a></li>
<li><a>subitem7</a></li>
<li><a>subitem8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
css:
ul.menu li{
display: none;
}
ul.menu > li{
display: block;
}
ul.menu > li:hover > ul > li,
ul.menu ul > li:hover > ul > li{
display:block;
}
I've put together a working and minimalistic jsfiddle demo.
You hide all UL's inside .menu. Upon hovering any list-item, you reveal any direct descendant UL. I use display: block; and display: none; for the purpose of keeping it simple.
CSS:
/* Hide all UL's inside .menu */
.menu ul {
display: none;
}
/* Show any UL which is a direct child of a hovered list-item */
.menu li:hover > ul {
display: block;
}
I am trying to create a second level dropdown. I successfully created first level dropdown but bit stuck in making it level 2. Please assist me to complete it..
and also please explain me what mistake I am doing that I cant get the second level dropdown even the css part is good (I think so)
EDIT: I know there are many tutorials on dropdown css. But I want to know why this is not working.
Here is the link to jsbin
HTML
<ul id="nav">
<li>Home</li>
<li>Details
<ul id="subNav">
<li>x details<li>
<li>y details</li>
</ul></li>
<li>About Us
<ul id="xSubNav">
<li>About company
<ul>
<li>full information</li>
<li>summary</li>
</ul></li>
<li>About Author</li>
</ul></li>
</ul>
CSS
*{font-family:consolas;}
li{line-height:20px;}
ul#nav>li{float:left;width:100px;list-style:none;
cursor:hand;cursor:pointer;}
ul#nav li li
{display:none;width:150px;}
ul#nav li ul
{padding:0;margin:0;}
ul#nav>li:hover>ul>li
{display:block;}
ul#nav>li:hover{color:grey;}
ul li li{color:black;}
ul li li:hover
{color:cornflowerblue;}
ul li li:hover li /* level 2 dropdown part */
{display:block;margin-left:150px;width:300px;}
Here is solution with your code
Just add the below css:
ul ul li { position:relative;}
ul ul li ul { position:absolute; display:none; left:0px; top:0px;}
ul ul li:hover ul { display:block;}
ul#nav li li li {display:block;}
Check this working fiddle
The problem is the specificity of CSS rules. Just add #nav to the last three rules, to not get overridden by the first ones.
ul#nav li li{color:black;}
ul#nav li li:hover
{color:cornflowerblue;}
ul#nav li li:hover li
{display:block;margin-left:150px;width:300px;}
And I think some other tuning is needed, but that's the idea.