HTML and CSS Simple and Animated Dropdown Menus

HTML and CSS Simple and Animated Dropdown Menu

In this tutorial, we will create 9 Dropdown Menus. We will only use HTML and CSS to create these Dropdown Menus.

Below the List and Navigation of the Dropdown Menus –

  • Simple Dropdown Menu
  • Fade in Dropdown Menu
  • Slide down Dropdown Menu
  • Left to Right Slide Dropdown Menu
  • Right to Left Slide Dropdown Menu
  • Fold out Dropdown Menu
  • Fold out 2 Dropdown Menu
  • ZigZag Dropdown Menu
  • Zoom in and Zoom out Dropdown Menu

Simple Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  display: block;
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Dropdown Menu with Fade in Effect

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fade in Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  opacity: 1;
  visibility: visible;
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Slide down Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slide Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
  max-height: 0;
  -webkit-transition: max-height .5s;
  -o-transition: max-height .5s;
  transition: max-height .5s;
  overflow: hidden;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  max-height: 400px;
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Slide left to right Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slide left to right Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
  margin-left: -100%;
  visibility: hidden;
  -webkit-transition: margin-left .3s;
  -o-transition: margin-left .3s;
  transition: margin-left .3s;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  margin-left: 0;
  visibility: visible;
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Slide right to left Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slide right to left Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
  margin-left: 100%;
  visibility: hidden;
  -webkit-transition: margin-left .3s;
  -o-transition: margin-left .3s;
  transition: margin-left .3s;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  margin-left: 0;
  visibility: visible;
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Fold out Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fold out Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
  max-height: 0;
  -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: 350ms;
  -o-transition: 350ms;
  transition: 350ms;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  max-height: 400px;
  -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
  transform: perspective(400) rotate3d(0, 0, 0, 0);
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Fold out 2 Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fold out 2 Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
  max-height: 0;
  -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  -webkit-transition: 350ms;
  -o-transition: 350ms;
  transition: 350ms;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  max-height: 400px;
  -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
  transform: perspective(400) rotate3d(0, 0, 0, 0);
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

ZigZag Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ZigZag Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  width: 200px;
  left: 0;
  visibility: hidden;
}

.dropdown li ul li {
  background-color: #444444;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li ul li:nth-child(odd) {
  -webkit-transform: translate(100px);
  -ms-transform: translate(100px);
  transform: translate(100px);
}

.dropdown li ul li:nth-child(even) {
  -webkit-transform: translate(-100px);
  -ms-transform: translate(-100px);
  transform: translate(-100px);
}

.dropdown li:hover>ul {
  visibility: visible;
}

.dropdown li:hover>ul li {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Zoom in and Zoom out Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Zoom in and Zoom out Dropdown Menu - W3jar.Com</title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

.dropdown {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  height: 50px;
  background-color: #333333;
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: block;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.dropdown li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #444444;
  width: 200px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.dropdown li ul li a {
  height: 35px;
  line-height: 35px;
  color: #999;
}

.dropdown li ul li a:hover {
  background-color: rgba(23, 23, 23, 0.9);
  color: #ffffff;
}

.dropdown li:hover>ul {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

.dropdown li:hover>a {
  background-color: #ffffff;
  color: #222222;
}
</style>
</head>
<body>
    <ul class="dropdown">
        <li><a href="#">Dropdown</a>
            <ul>
                <li><a href="#">Menu - 1</a></li>
                <li><a href="#">Menu - 2</a></li>
                <li><a href="#">Menu - 3</a></li>
                <li><a href="#">Menu - 4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

See also:

Login and Registration Page Template Using HTML and CSS

Posts Navigation


Leave a Reply

Your email address will not be published. Required fields are marked *