We use cookies to ensure that we give you the best experience on our website.

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

Live Demo
<!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

Live Demo
<!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

Live Demo
<!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

Live Demo
<!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

Live Demo
<!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

Live Demo
<!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

Live Demo
<!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

Live Demo
<!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

Live Demo
<!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

Related Posts

Leave a Reply

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