CSS Drop Down Menu

Developer
Amit Verma
Size
2,390 Kb
Views
6,072
  1. CSS Drop Down Menu Previews
  2. CSS Drop Down Menu HTML Codes
  3. CSS Drop Down Menu CSS Codes

How do I make an css drop down menu?

What is a css drop down menu? How do you make a css drop down menu? This script and codes were developed by Amit Verma on 18 January 2023, Wednesday.

CSS Drop Down Menu Previews
IQ Test

CSS Drop Down Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Drop Down Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a> <!-- First Tier Drop Down --> <ul> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Tutorials</a></li> </ul> </li> <li><a href="#">Web Design</a> <!-- First Tier Drop Down --> <ul> <li><a href="#">Resources</a></li> <li><a href="#">Links</a></li> <li><a href="#">Tutorials</a>	<!-- Second Tier Drop Down --> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Other</a> <!-- Third Tier Drop Down --> <ul> <li><a href="#">Stuff</a></li> <li><a href="#">Things</a></li> <li><a href="#">Other Stuff</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
<p>Read tutorial <a target="_blank" href="http://webdesignerhut.com/css-dropdown-menu/">here</a></p>
</div>
</body>
</html>

CSS Drop Down Menu - Script Codes CSS Codes

/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {	background: #212121;	font-size:22px;	line-height: 32px;	color: #ffffff;	word-wrap:break-word !important;	font-family: 'Open Sans', sans-serif;	}
h1 {	font-size: 60px;	text-align: center;	color: #FFF;
}
h3 {	font-size: 30px;	text-align: center;	color: #FFF;
}
h3 a {	color: #FFF;
}
a {	color: #FFF;
}
h1 {	margin-top: 100px;	text-align:center;	font-size:60px;	font-family: 'Bree Serif', 'serif';	}
#container {	margin: 0 auto;
}
p {	text-align: center;
}
nav {	margin: 50px 0;	background-color: #E64A19;
}
nav ul {	padding: 0; margin: 0;	list-style: none;	position: relative;	}
nav ul li {	display:inline-block;	background-color: #E64A19;	}
nav a {	display:block;	padding:0 10px;	color:#FFF;	font-size:20px;	line-height: 60px;	text-decoration:none;
}
nav a:hover {	background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {	display: none;	position: absolute;	top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {	display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {	width:170px;	float:none;	display:list-item;	position: relative;
}
/* Second, Third and more Tiers	*/
nav ul ul ul li {	position: relative;	top:-60px;	left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
CSS Drop Down Menu - Script Codes
CSS Drop Down Menu - Script Codes
Home Page Home
Developer Amit Verma
Username amit-webdesigner
Uploaded January 18, 2023
Rating 3
Size 2,390 Kb
Views 6,072
Do you need developer help for CSS Drop Down Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Amit Verma (amit-webdesigner) Script Codes
Name
BOX Rotating Card
Zoom in Effect on Image Hover
Image Hover Effects
Bootstrap 3.0. Responsive Pricing Tables
Bootstrap Custom MegaMenu Navbar with Sidenav taggle social accordion full page responsive fade carousel and customblcok quotes
Gradients
Pricing table hover effect
Bootstrap Number Spinner
Hover effects with CSS3
Testimonial Fancy tabs responsive
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!