#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>
Related
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.
Ive got a 3 leve dropdown menu and the 3rd level sub-menu displays next to the 2nd level menu item like it should, except for a gap.
The 2nd level is set to a width of 100px so I've absolutely positioned the 3rd level to top:0, left:100px so it displays to the right of the 2nd level, but there's a gap. If I change left:100px to left:97px there is no gap. Why is this?
The HTML:
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3
<ul>
<li>Sub-Menu 4</li>
<li>Sub-Menu 5</li>
<li>Sub-Menu 6</li>
</ul>
</li>
</ul>
</li>
<li>Menu 5</li>
</ul>
</nav>
The CSS:
/* Initialise for 3 tiers */
nav ul, ul li ul, ul li ul li ul {
margin:0;
padding:0;
}
nav ul li, ul li ul li, ul li ul li ul li {
list-style-type:none;
float:left;
}
/* Link Appearance for 3 tiers */
nav ul li a, ul li ul li a, ul li ul li ul li a {
text-decoration:none;
color:#fff;
background:#666;
padding:5px 10px;
float:left;
}
nav ul li a:hover, ul li ul li a:hover, ul li ul li ul li a:hover {
background:#C00;
}
/* 2nd Tier */
nav ul li {
position:relative;
}
nav ul li > ul {
display:none;
position:absolute;
top:30px;
left:0;
width:100px;
}
nav ul li:hover > ul{
display:block;
}
/* 3rd Tier */
nav ul li ul li {
position:relative;
}
nav ul li ul li:hover > ul {
display:block;
}
nav ul li ul li ul {
display:none;
position:absolute;
top:0;
left:100px;
}
JSFiddle
using percentage instead of pixel for this issue:
try left:100% and check result
nav ul li ul li ul {
display:none;
position:absolute;
top:0;
left:100%;
}
Fiddle
also you don't need to write ul li ul li ul li a or like so.simply you can write:
ul ul ul a{
your CSS code
}
The issue is the gap between the menus. They need to be adjacent or even overlap for this hover trick to work.
So instead of specifying
left: 100px;
do something like
left: 100%;
/* or even */
left: 99%;
This will cause the 3rd layer to be adjacent to the second layer menu, or even overlap the second slightly (for 99%), allowing you to move the mouse without any interruptions that close the menu. And you won't have to worry about the width of the menus either.
Updated fiddle: http://jsfiddle.net/tqEfW/5/
If you want to keep the gap for the look of it, you can give the 3rd layer ul a padding:
nav ul li ul li ul {
....
left: 100%;
padding-left: 4px;
}
Ad demonstrated here: http://jsfiddle.net/tqEfW/9/
That said, from a UX point of view, menus with 3 layers are very hard to use and should be avoided when possible.
If you create CSS selectors like ul.first-level > li or ul.second-level > li it will only select the li that are inmediately after the ul with class first-level (or with class second-level, respectively).
In this way, without interating a lot of ul li ul li ul that can be really hard to read you can control the appearance of any complex nested list.
Its looks like you know how to solve it but your question is why this is happening.
Now in your code you put the width 100px to ul. but the li didn't have nay width. now both width is not same thing. width in ul is the width of this list area. And width in li means width of each individual list item. In your case your
ul li a
{
padding: 5px 10px;
}
now the padding of a do not full the full area. and you put the background color at ul li a so the much area its covering(not sure 'cover' is the appropriate word to mention it) its showing dark in back and around 3px left so its showing white.
If you put
ul li a
{
padding: 5px 10.1px;
}
You will see the li have no gap[#123] between levels of menu.
Instead of setting the background to ul li a if you set it to ul you can see there is no gap[#123]
#123 The actual white area is not gap. The ul is 100px but text including the padding of 10px in left and right not filling the total 100px. Its filling only 97px so when you are putting the width as 97px its showing no white area. But when it is 100px this showing the background on 97px as black and the rest 3px white which looks like a gap.
I got a css menu with 3 levels. You can see my actual code right here http://jsfiddle.net/7rMgu/
As you can see, my secondary level don't keep the light blue background when navigating in the 3rd level. I've looked over the website for similar thread but I just found similar problems with only 2 levels. Also, can someone explain when I should use the '>' in css as I'm a bit confused.
CSS
html{height:100%;background-color:#0d497d;}
body{width:100%;height:100%;margin:0px;padding:0px;color:#575757;font:0.75em "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;}
div.menuAdmin ul{margin:0;padding:0;float:right;height:100%;}
div.menuAdmin ul li{display:block;float:left;height:23px;margin-bottom:0;}
div.menuAdmin ul li a{color:#fff;padding:0.1em 0.3em 0.2em 0.3em;text-decoration:none;font-size:12px;display:block;margin:0.85em 0em 0em 0em;width:130px;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover a{color:#000;border-radius:5px;background-color:#78B9EF;}
div.menuAdmin ul li ul{display:none;}
div.menuAdmin ul li:hover > ul {display:block;height:20px;width:139px;position:absolute;margin:0;}
div.menuAdmin ul li:hover > ul li a {line-height: 20px;color:#fff;text-decoration: none;margin: 0;padding-bottom: 0.1em;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover > ul li a:hover {color:#000;text-decoration:none;text-shadow:none;background-color: #78B9EF;}
div.menuAdmin ul ul li:hover > ul {display:block;position:absolute;left:100%;top:0;width:139px;}
div.menuAdmin ul > ul > ul li:hover > a {color:#444;background-color:#78B9EF;}
HTML
<div class='menuAdmin'>
<ul>
<li>
<a href=''>A</a>
<ul>
<li>
<a href=''>1</a>
<ul>
<li>
<a href=''>A1</a>
</li>
<li>
<a href=''>A2</a>
</li>
<li>
<a href=''>A3</a>
</li>
<li>
<a href=''>A4</a>
</li>
</ul>
</li>
<li>
<a href=''>2</a>
</li>
<li>
<a href=''>3</a>
</li>
<li>
<a href=''>4</a>
</li>
</ul>
</li>
<li>
<a href=''>B</a>
</li>
<li>
<a href=''>C</a>
</li>
<li>
<a href=''>D</a>
</li>
</ul>
</div>
Thanks
To keep the :hover effect you need to make the change on hover the li element not just the a tag, so you have this:
div.menuAdmin ul li:hover > ul li a:hover
Must be:
div.menuAdmin ul li:hover > ul li:hover > a
With the hover on the li element keeps the effect since the ul wich is the submenu is part of the li.
Check the Demo http://jsfiddle.net/7rMgu/1/.
Now your second question when use this >; when you only want to affect the direct children, it let you avoid the same style on nested elements. An example with the same selector I have fix, if you remove the last > check what happen:
http://jsfiddle.net/7rMgu/3/
It changes all a inside the li even if are inside some nested elements.
Here is an updated fiddle:
http://jsfiddle.net/ryanwheale/7rMgu/2/
Essentially, you always want the :hover selector to be on the LI. You had it on the A.
Also, the > selector in CSS means "direct children"... best explained by example:
<div class="my-div">
<p>This should be blue</p>
<div>
<p>This should be green</p>
</div>
</div>
and this css:
.my-div p { color: green }
.my-div > p { color: blue }
You have a few redundant rules, I've tried to boil it down for you:
.menuAdmin ul{ /* all lists */
margin:0;
padding:0;
list-style: none;
}
.menuAdmin li { /* all list items */
margin:0;
padding:0;
}
.menuAdmin > ul { /* first level list*/
float: right;
}
.menuAdmin > ul > li { /* first level list items*/
float: left;
}
.menuAdmin ul ul { /* second and third level list */
position: absolute; /* remove from flow */
display: none; /* hide by default */
}
.menuAdmin ul ul ul { /* third level list */
top: 0;
left: 100%;
}
.menuAdmin li:hover > ul { /* first level list inside of a hovered item */
display: block;
}
.menuAdmin a { /* all links */
color:#fff;
padding:0.1em 0.3em 0.2em 0.3em;
text-decoration:none;
font-size:12px;
display:block;
width:130px;
background-color: #0d497d;
border:1px solid #78B9EF;
border-radius:5px;
}
.menuAdmin li:hover > a { /* links inside hovered list item */
color:#000;
background-color:#78B9EF;
}
As already answered, > means "child" (a.k.a. direct descendant)
See demo at http://jsfiddle.net/7rMgu/5/
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'm trying to target the first and last anchor within a list-item of an unordered list:
<ul>
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
I have tried:
.menu ul .last a {}
.menu ul.last a {}
.menu ul li .last a {}
.menu ul li.last a {}
I need to target the anchor as I need to remove the border of the first and last anchor. I can't use (or at least I don't think I can) border on the <li>, as it needs some vertical padding so the separator border is not vertically flush.
If you don't need to worry about old browsers, use the :first-child and :last-child pseudo-classes on the list items, like so:
/* Because we are looking at the <li> children of your <ul> */
.menu ul li:first-child a {}
.menu ul li:last-child a {}
However, support for CSS3 :last-child is pretty poor right now, so a more browser-compatible alternative is to manually give the last list item a last class, like so (and doing the same for first):
<ul>
<li class="first">HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li class="last">LINK</li>
</ul>
Then, you can use these selectors:
.menu ul li.first a {}
.menu ul li.last a {}
You want the :first-child and :last-child pseudo-class selectors:
<style type="text/css">
.menu ul li:first-child a {
color: green;
}
.menu ul li:last-child a {
color: red;
}
</style>
<div class="menu">
<ul>
<li>apple</li>
<li>baker</li>
<li>charlie</li>
<li>delta</li>
</ul>
</div>
What I think you require are the :first-child and :last-child selectors.
.menu ul li:first-child a
.menu ul li:last-child a