2 replies [Last post]
Ganesh Ujwal
Ganesh Ujwal's picture
Last seen: 7 years 5 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;

gautamz07's picture
Last seen: 5 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

HTML code ?

where is the HTML code ganesh ?

Tony's picture
Last seen: 3 weeks 2 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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