How to create a drop-down navigation menu with CSS
A unique and attractive navigation menu is important for every website. Navigation menus are critical for the superb accessibility of your website. Users like well-designed websites.
We’re going to show the CSS/HTML based menu tutorial allowing us to create a drop-down navigation menu easily, and it offers smaller application size.
Using CSS/HTML is the best way to avoid JavaScript conflicts. Besides, the CSS/HTML based menu can be used by more people.
Create HTML
- Create a <div> element with an id "wrap".
- Use a <ul> tag in your <div> element with a class of "navbar". Each element of an unordered list is declared inside the <li> tag.
- Write the content that you want to show in your menu inside the <li> tag.
<div id="wrap">
<ul class="navbar">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Books</a>
<ul>
<li>
<a href="#">Learn HTML</a>
</li>
<li>
<a href="#">Learn CSS</a>
</li>
<li>
<a href="#">Learn JavaScript</a>
</li>
<li>
<a href="#">Learn PHP</a>
</li>
</ul>
</li>
<li>
<a href="#">Quizzes</a>
<ul>
<li>
<a href="#">CSS Basic</a>
</li>
<li>
<a href="#">PHP Basic</a>
</li>
<li>
<a href="#">JavaScript Basic</a>
</li>
</ul>
</li>
<li>
<a href="#">Tools</a>
<ul>
<li>
<a href="#">Geomatric Images</a>
</li>
<li>
<a href="#">Color Picker</a>
</li>
<li>
<a href="#">Password Generator</a>
</li>
<li>
<a href="#">HTML Editor</a>
</li>
<li>
<a href="#">Base 64</a>
</li>
</ul>
</li>
<li>
<a href="#">Snnipets</a>
<ul>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">Angular</a>
</li>
<li>
<a href="#">Git</a>
</li>
</ul>
</li>
<li>
<a href="#">String Functions</a>
<ul>
<li>
<a href="#">String Reverse</a>
</li>
<li>
<a href="#">URL Encoder</a>
</li>
<li>
<a href="#">Empty Lines Remover</a>
</li>
<li>
<a href="#">String Word Count</a>
</li>
</ul>
</li>
</ul>
</div>So, the first step is ready. Let’s move on and create an attractive navigation menu!
Add CSS
- Set the width and height of the "wrap" with the width and the height properties.
- Set z-index so as to make sure that the navigation menu will be placed at the top of other elements. Add margin and position properties.
- Set the color of the entire menu with the color property. You can pick colors from our Color Picker tool.
- Set the position to "absolute" so as our drop-down menus won't push other elements down.
- Line up the menu items horizontally across the top of the page by setting the float property to "left".
- Style the rest of anchor tags.
- Style the menu background so as to change the color when hovered.
- Add style so as to hide the drop-down menu, and another style to display it when a mouse pointer is hovered over the main menu item.
- Style the drop-down menu.
- Change the borders to create the main menu’s effect.
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #444444;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.navbar li {
height: auto;
width: 135.8px;
float: left;
text-align: center;
list-style: none;
font: normal bold 13px/1em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #444444;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #ccc9c9;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover,
a:hover {
background-color: #444444;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #444444;
}
.navbar li ul li a {
border-left: 1px solid #444444;
border-right: 1px solid #444444;
border-top: 1px solid #c9d4d8;
border-bottom: 1px solid #444444;
}
.navbar li ul li a:hover {
background-color: #a3a1a1;
}So, let’s see what looks like our drop-down menu:
Example of creating a drop-down navigation menu:
<!DOCTYPE html>
<html>
<head>
<style>
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #444444;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.navbar li {
height: auto;
width: 135px;
float: left;
text-align: center;
list-style: none;
font: normal bold 13px/1em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #444444;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #ccc9c9;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover,
a:hover {
background-color: #444444;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #444444;
}
.navbar li ul li a {
border-left: 1px solid #444444;
border-right: 1px solid #444444;
border-top: 1px solid #c9d4d8;
border-bottom: 1px solid #444444;
}
.navbar li ul li a:hover {
background-color: #a3a1a1;
}
</style>
</head>
<body>
<h2>Example of creating a drop-down navigation menu</h2>
<div id="wrap">
<ul class="navbar">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Books</a>
<ul>
<li>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-javascript.html">Learn JavaScript</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
</li>
</ul>
</li>
<li>
<a href="#">Quizzes</a>
<ul>
<li>
<a href="https://www.w3docs.com/quiz-start/css-basic">CSS Basic</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz-start/php-basic">PHP Basic</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz-start/javascript-basic">JavaScript Basic</a>
</li>
</ul>
</li>
<li>
<a href="#">Tools</a>
<ul>
<li>
<a href="https://www.w3docs.com/tools/html-geometric-images/">Geomatric Images</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/color-picker">Color Picker</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/password-generator">Password Generator</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/editor">HTML Editor</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/image-base64">Base 64</a>
</li>
</ul>
</li>
<li>
<a href="#">Snnipets</a>
<ul>
<li>
<a href="https://www.w3docs.com/snippets/css.html">CSS</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/javascript.html">JavaScript</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/angularjs.html">Angular</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/git.html">Git</a>
</li>
</ul>
</li>
<li>
<a href="#">String Functions</a>
<ul>
<li>
<a href="https://www.w3docs.com/tools/string-revers">String Reverse</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/string-url-encoder">URL Encoder</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/string-remove-empty-lines">Empty Lines Remover</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/string-word-count">String Word Count</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>Example of creating a drop-down navigation menu with animation:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
box-sizing: border-box;
}
body {
background: url('https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center;
background-size: cover;
min-height: 600px;
font-family: 'Helvetica Neue', sans-serif;
}
nav {
text-align: center;
}
.menu {
display: inline-block;
}
.menu>li {
float: left;
color: #e298e1;
width: 140px;
height: 40px;
line-height: 40px;
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
font-size: 17px;
}
.sub-menu {
transform: scale(0);
transform-origin: top center;
transition: all 300ms ease-in-out;
}
.sub-menu li {
font-size: 14px;
background: rgba(0, 0, 0, 0.8);
padding: 8px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transform: scale(0);
transform-origin: top center;
transition: all 300ms ease-in-out;
}
.sub-menu li:last-child {
border-bottom: 0;
}
.sub-menu li:hover {
background: black;
}
.menu>li:hover .sub-menu li {
transform: scale(1);
}
.menu>li:hover .sub-menu {
transform: scale(1);
}
</style>
</head>
<body>
<nav>
<ul class="menu">
<li>
Italy
<ul class="sub-menu">
<li>Rome</li>
<li>Milan</li>
<li>Venice</li>
<li>Lacio</li>
<li>Florence</li>
</ul>
</li>
<li>
France
<ul class="sub-menu">
<li>Paris</li>
<li>Bordeau</li>
<li>Marseille</li>
<li>Toulouse</li>
</ul>
</li>
<li>
Spain
<ul class="sub-menu">
<li>Madrid</li>
<li>Valencia</li>
<li>Barcelona</li>
<li>Seville</li>
<li>Bilbao</li>
</ul>
</li>
<li>
Russia
<ul class="sub-menu">
<li>Moscow</li>
<li>Saint Petersburg</li>
<li>Tula</li>
<li>Chekhov</li>
</ul>
</li>
<li>
Germany
<ul class="sub-menu">
<li>Berlin</li>
<li>Munich</li>
<li>Frankfurt</li>
<li>Hamburg</li>
<li>Dresden</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>