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.
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.
I'm trying to make my first menu by hovering over links but when I hover, the ul within the first ul isn't showing.
JSfiddle: http://jsfiddle.net/2FLMD/
So basically I have a nav with a ul and links within that. Then I have another ul within the first link called Log In. Inside that second ul are two links with one input elements inside each.
HTML
<nav>
<ul>
<li>LOG IN</li>
<ul>
<li>Username: <input type="text" name="username"> </li>
<li>Password: <input type="password" name="password"></li>
</ul>
<li>SIGN UP</li>
<li>CUSTOMER SERVICE</li>
<li>SPECIALS</li>
<input type="search" name="search">
</ul>
</nav>
CSS
nav ul{
background:#1C1D21;
margin:0;
padding:0;
}
nav ul li{
display:inline-block;
color:white;
padding:10px 20px;
border-right:1px solid white;
}
nav ul li a{
color:white;
text-decoration:none;
}
nav ul ul {
position:absolute;
border-top:1px solid red;
}
/*Where the problem seems to occur */
nav ul ul li {
display:block; /*change to display to none */
}
/*The hovering part */
nav ul li:hover > ul li{
display:block;
}
The problem is in the html structure as your sub ul is not containing in the li and is existing as a sibling to the li elements:
<li>LOG IN
<ul>
<li>Username: <input type="text" name="username"></li>
<li>Password: <input type="password" name="password"></li>
</ul>
</li>
Example
You want to put the sub list (sub nav) inside your main list (main nav)
http://jsfiddle.net/doiks14/2FLMD/4/
The selector you have nav ul li:hover > ul li indicates that nav ul li has child of ul li
I simply changed the mark up to reflect what you're trying to do.
<li>
LOG IN
<ul>
<li>Username: <input type="text" name="username"></li>
<li>Password: <input type="password" name="password"></li>
</ul>
</li>
Also note that this is the semantically correct way of creating a list.
Change > to + like this:
nav ul li:hover + ul li{
display:block;
}
Demo.
Note that the ul (you want to show) is not a direct child of the li which you hover on, it's just an adjacent sibling of that li, so we should use + instead of >.
There are several errors on yout HTML markup. Here is a quick fix
Your selector wasn't formed correctly, try this:
nav ul:hover ul li{
display:block;
}
ref: http://jsfiddle.net/2FLMD/2/
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 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 have a vertical navigation menu and I want to show different levels of the menu upon hovering of certain elements. The problem is that the method I used is not working and I do not understand why. When I hover over "Product", I expect to see a sub-menu expand, but nothing happens. Why?
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
border:1px solid red;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
Your code:
nav ul li:hover > ul {
display:block;
}
Means "Make any ul within a hovered li display:block". Your submenu is not within the LI, it's after it. Here's a working version of what you were trying to do.
Working HTML:
<li>Product
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
</li>
Working CSS:
nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;
}
Also
nav ul ul {
display:none;
}
should be
nav ul li ul {
display:none;
}
Try this for your html:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Product
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
You have two ways of changing this; you can either update the HTML or you can update the CSS.
There are pros and cons to changing code and in a vacuum I can't recommend one approach over the other.
Without changing your HTML you can make the CSS work like this:
nav ul li:hover + ul {
display: block;
}
Note that rather than using the descendant selector this uses the adjacent selector and applies the style to the element that immediately follows the hovered LI.
Alternatively, the HTML change mentioned above does work equally well.
This link http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ provides a fantastic resource.