Create a Simple Animated Dropdown Menu using Pure CSS Without JavaScript

CSS (Cascading Style Sheets) has revolutionized web designing with its features. Styling the web pages took lot of effort before CSS came in, obviously with a lot of support from all modern browsers. It is here to stay for a very long time. Here I am sharing with you a simple example on how to design a CSS Dropdown (Vertical) Menu, with Animation effect, without using JavaScript.

This technique helps reduce code and limit the use of JavaScript. Today browsers can block painstakingly written JavaScript without warning. Using CSS Transition, I have tried to create a little animation for the dropdown menus. I am also using a simple fading effect using CSS transition on the menus.

Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - No | Safari - Yes

Pure CSS Drop Down Menu with Animation Effect

See this demo

The Markup and Style

<html>
<head>
    <title>CSS Animated Dropdown Menu Example</title>

    <style>
        body {
            background-color:#FFF;
            font:13px Sans-Serif;
        }
        ul {
            position:relative;
            margin:0;
            padding:0;
        }
        #menu {
            width:auto;
            float:left;
            font-weight:bold;
            cursor:pointer;
            background:#5C7C99;
            border-radius:2px;
            -moz-border-radius:2px; 
            -webkit-border-radius:2px;
        }
        #menu ul {
            display:table;
            line-height:10px;
        }
        #menu ul li {
            position:relative;
            display:inline;
        }
        #menu ul li a {
            float:left;
            position:relative;
            padding:20px;
            color:#FFF;
            text-decoration:none;
        }
        #menu ul li a:hover {
            background:#000;
        }
        #menu ul ul {
            position:absolute;
            width:210px;
            top:50px;
            left:-370px;       /* CHROME, SAFARI */
            -webkit-transform:translateX(232px);     /* CHROME SAFARI */
            -moz-transform:translateX(135px);       /* FIREFOX */
            
            /* BACKGROUND COLOR AND BORDER. */
            background:#5C7C99;
            border-radius:2px;
            -moz-border-radius:2px; 
            -webkit-border-radius:2px;

            /* ADD BORDER SHADOW. */
            box-shadow:0 0 10px #444;
            -moz-box-shadow:0 0 10px #444;
            -webkit-box-shadow:0 0 10px #444;
        }
        
        /* SUB MENU LIST */
        #menu ul ul li {
            text-align:left; 
            margin:0;
        }
        
        /* SET HEIGHT AS '0', SO THE SUBMENUS REMAINS HIDDEN IN THE BEGINNING. */
        
        #menu ul ul li a {
            height:0; 
            line-height:0; 
            width:200px; 
            color:#FFF;
            padding:0 20px;
            -moz-opacity: 0;
            opacity:0;
            filter: alpha(opacity=0);
        }
        #menu ul ul ul {
            visibility:hidden;
            position:absolute;
            top:175px;
        }
        #categories a {
	        transition:all 0.3s linear; 
	        -o-transition:all 0.3s linear;
	        -moz-transition:all 0.3s linear; 
	        -webkit-transition:all 0.3s linear;
        }
        #categories:hover ul li a {
            height:40px;
            line-height:40px;
            -moz-opacity: 1;
            opacity:1;
            filter: alpha(opacity=100);
        }
        
        #menu #categories #da > ul {
            transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
            -o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
            -moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	        -webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
        }
        #menu #categories #da:hover > ul {
            visibility:visible;
            position:absolute;
            left:-232px;                             /* CHROME, SAFARI */
            -moz-transform:translateX(232px);       /* FIREFOX */
        }
    </style>
</head>

<body>
    <p>Roll the mouse over menu headers!</p>

    <div id="menu">
        <ul>
            <li><a href="#">HOME</a></li>
            <li id="categories"><a href="#">CATEGORIES +</a>
                <ul>
                    <li><a href="#">HTML5</a></li>
                    <li><a href="#">ASP.NET WEB API</a></li>
                    <li><a href="#">ORACLE</a></li>
                    <li><a href="#">SQL SERVER</a></li>
                    <li id="da">
                        <a href="#">DESKTOP APPLICATIONS +</a>
                        <ul>
                            <li><a href="#">DATAGRIDVIEW (C#)</a></li>
                            <li><a href="#">CALCULATOR APP</a></li>
                        </ul>
                    </li>
                    <li><a href="#">SUBSCRIBE</a></li>
                </ul>
            </li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</body>
</html>

Try it

To design the Dropdown menu, I've used HTML Unordered List or simply the (<ul></ul>) tag, which I have placed inside the <div></div> tag. The styling is taken care of by the CSS block inside the <head></head> tag.

The transitions allows the menu and its sub menus to animate.

-webkit-transition:all 0.3s linear;

See this demo

Browser Support:
Chrome 39.0 - Yes | Edge - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - No | Safari - Yes

← PreviousNext →