How to make multilevel drop down menu?

HTML & CSS
1

Hi there

My this question is based on

and this

In both I asked about How to make dropdown which is working fine Now I want to make dropdown more then one level but that is not working according to my requirement
this is my jsfiddle.net
http://jsfiddle.net/vngx/u94688bo/3/

But not working according to my requirement

How to do this?

Thanks

2

Hi,

You only seem to have one level in that dropdown which doesn’t seem to be working anyway. You need to add the following code to get that menu working.

#header li {position:relative;}
#header li:hover > ul {
	display:block;
	position:absolute;
	left:0;
	top:100%;
	margin:0;
	padding:0;
}
#header li ul li {display:block;float:none;}

Dropdowns are pretty straightforward and you just set postion:relative on the parent list and position:absolute on the nested ul. When the list is hovered you show the ul.

e.g.

#header li:hover > ul {show it where you want}

For more levels you can’t show the menu below so you then place it to the side so for a further nested menu you would target the next layer like so:

#header li li:hover > ul {
	display:block;
	position:absolute;
	left:100%;
	top:0;
	margin:0;
	padding:0;
}

Dropw down menus are a bit awkward in a responsive site and of course there is no hover on mobile and I much prefer click menus which are easier for those with poor motor skills to use.

Something like this.

3

@PaulOB

Can you add some code on my jsfiddle according to my logic?

I have seen so many examples on net of dropdown menu but I can’t get how they are working.

4

Here’s the basics based on your code. Just play around with it and change things until you understand it.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
	height:100%;
}
body {
	height:100%;
	background-color:olive;
}
#mainpara {
	width:70%;
	margin:0 auto;
	padding:0;
	border-radius:10px;
	background-color:gray;
	text-align:center;
}
#header, #topleft {
	list-style:none;
	text-align:center;
}
#header li a, #topleft li a, #header ul li a {
	text-decoration:none;
	padding:0 1em;
}
#topleft {
	float:right;
}
#header, #header ul {
	margin:0;
	padding:0;
	list-style:none;
}
#topleft li {
	float:left;
	margin:0 1em 0 0;
	background-color:lightgray;
}
#header {
	display:inline-block;
	font-size: 150%;
	margin:10px 0 0;
}
#header > li {
	display: inline-block;
	margin: 0 10px 10px 0;
	background-color: lime;
}
#header  li{	position:relative;}
#header li a {
	display:block;
	padding:5px 15px;
}
#header ul {
	position:absolute;
	top:100%;
	left:0;
	margin-left:-999em;
	width:200px;
	background:red;
}
#header li:hover {
	background-color: red;
}
#header ul li {
	display:block;
	text-align:left;
	font-size:16px;
	margin:0;
}
#header ul li a{padding:10px;}
#header li:hover > ul {
	margin:0;
}
#header li li:hover a{background:teal}
#header li li:hover > ul {
	margin:0;
	left:100%;
	top:0;
	background:teal;
}
#header li li li:hover a{background:green}
</style>
</head>

<body>
<div id="mainpara">
		<ul id="topleft">
				<li><a href="#">Login</a></li>
				<li><a href="#">Sign Up</a></li>
		</ul>
		<ul id="header">
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a>
						<ul>
								<li><a href="#">WebDesign </a> </li>
								<li><a href="#">Android App &raquo;</a>
										<ul>
												<li><a href="#">Sub Sub link 1</a></li>
												<li><a href="#">Sub Sub link 2</a></li>
												<li><a href="#">Sub Sub link 3</a></li>
										</ul>
								</li>
								<li><a href="#">Bulk SMS</a></li>
						</ul>
				</li>
				<li><a href="#">Courses</a></li>
				<li><a href="#">Contact Us</a></li>
		</ul>
</div>
</body>
</html>
5

What this “>” or “<” sign do in coding?

6

As for what does “<” do…well nothing yet but it might ONE day be the parent selector :stuck_out_tongue: (who knows) . For now it does nothing.

1 Like
7

I do not understand these two lines

"
#header li:hover > ul {
margin:0;
}
"
and
"
#header li li:hover > ul {
margin:0;
left:100%;
top:0;
background:teal;
}
"

What these are doing exactly in code?

8

#header li:hover > ul {
margin:0;
}

By default the nested ul was set to margin-left:-999em; which hides it off the side of the screen and out of the way but still available for screen readers and spiders (unlike display;none).

When you hover a parent list item you then bring the nested ul into view. As you have multiple nested menus you must olny bring the immediate child into view and not all nested menus.

So li:hover > ul will show a nested ul but not all nested uls.

<ul id="header">
		<li><a href="#">About Us</a></li>
		<li><a href="#">Services</a> <!-- hover this parent 'li' and show the nested ul -->
				<ul>
						<li><a href="#">WebDesign </a> </li>
						<li><a href="#">Android App &raquo;</a>
								<ul><!-- however don't show me yet -->
										<li><a href="#">Sub Sub link 1</a></li>
										<li><a href="#">Sub Sub link 2</a></li>
										<li><a href="#">Sub Sub link 3</a></li>
								</ul>
etc....

Now:

#header li li:hover > ul {

This is saying that from 2 levels deep when you hover the list item at that level show the nested ul but this time move it to the side so we can see it because we no longer want to drop downwards.

The basis of a hover menu is that you hide the ul that is nested within a list item and then when you hover the list item you bring the ul back into view. It’s as straight forward as that although it probably seems more complicated in the context of multiple nested lists.

9

@PaulOB

Thanks

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.