2 replies [Last post]
Ganesh Ujwal
Ganesh Ujwal's picture
Offline
newbie
Last seen: 5 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-11-10
Posts: 2
Points: 4

how to create a navigational bar with drop down menu?
i found this CSS code for navigational bar with drop down menu somewhere else in google.
but i need to know every step, why they use "nav ul ul" so many times, why can't they use "nav ul ul" one time?
please explain the below code?

nav ul ul {
	display: none;
}
 
	nav ul li:hover > ul {
		display: block;}
 
nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}
nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}
 
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}
 
nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}
 
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}
<css>

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

HTML code ?

where is the HTML code ganesh ?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Ganesh Ujwal, Like

Hi Ganesh Ujwal,
Like gautamz07 mentioned it easier to answer with the markup as well.
Basically the repeated nav ul ... are targeting lower level menus.

This may help understand it: multi level menu