How to: Pure CSS dropdown menu with fade

Anarion · Feb 13, 2013

Here's something I'd that can be useful. I experimented some time ago with pure CSS drop down navigation that has CSS fade effect for drop down. I see way too many ridiculous jquery plugins these days for menus that break badly when javascript is off (or while page is loading) or they just perform poorly. So this is basically a base for drop down menu.

[IMG]

Colours are cheesy but this is just an example. =P

Code listing
I used 100% standard stuff so that means you have to add web-kit prefixes to get it look right in chrome for transitions and gradients. Chrome is becoming a real mess these days, I haven't even tested it in it but it works correctly out of the box in Firefox and IE10.

page.html:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS dropdown menu with fade</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="CSS dropdown menu with fade">
<body>
    <div class="page">
        <h1>CSS dropdown menu with fade</h1>
        <nav>
            <ul>
                <li><a href="#">Item 1</a>
                    <ul>
                        <li><a href="#">Something more</a>
                            <ul>
                                <li><a href="#">Even morefffffffff</a>
                                <li><a href="#">Item</a>
                            </ul>
                        <li><a href="#">Menu item</a>
                            <ul>
                                <li><a href="#">Submenu item</a>
                                <li><a href="#">Submenu item</a>
                                <li><a href="#">Submenu item</a>
                            </ul>
                        <li><a href="#">Menu item</a>
                    </ul>
                <li><a href="#">Item 2</a>
                <li><a href="#">Item 3</a>
                <li><a href="#">Item 4</a>
                    <ul>
                        <li><a href="#">Something</a>
                        <li><a href="#">Something</a>
                            <ul>
                                <li><a href="#">Something</a>
                                <li><a href="#">Something</a>
                                <li><a href="#">Something</a>
                            </ul>
                        <li><a href="#">Something</a>
                    </ul>
                <li><a href="#">Item 5</a>
                <li><a href="#">Item 6</a>
            </ul>
        </nav>
    </div>

style.css:

HTML:

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to bottom, #1C6992, #A7D8F2), #A7D8F2;
    background-size: 50px 300px;
    background-repeat: repeat-x;
    color: white;
    text-shadow: 1px 1px 1px #174256;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}
 
a {
    text-decoration: none;
}
 
h1 {
    font-size: 38px;
    margin: 12px 0;
}
 
.page {
    width: 560px;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 2px rgba(28, 105, 146, 0.60);
    background: rgba(213, 228, 237, 0.50);
    padding: 20px;
}
 
nav ul {
    padding: 0;
    white-space: nowrap;
}
 
nav ul ul {
    visibility: hidden;
    opacity:0;
    transition: opacity 0.3s linear, visibility 0.3s linear;
}
 
nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}
 
nav ul {
    list-style: none;
    position: relative;
    display: inline-block;
    background: linear-gradient(to bottom, #64B739, #1A602C) !important;
}
 
nav ul li {
    float: left;
}
 
nav ul li:hover {
    background: linear-gradient(to bottom, #64B739, #1A602C);
}
 
nav a {
    transition: box-shadow 0.3s;
}
 
a:hover {
    background: linear-gradient(to bottom, #64B739, #1A602C) !important;
    box-shadow: 0px 0px 0px 1px #3E9808 inset, 0 0 12px #284E10 inset;
}
 
nav ul li a {
    display: block;
    padding: 10px 20px;
    color: inherit;
}
 
nav ul ul {
    background: rgba(48, 151, 191, 0.4) !important;
    padding: 0;
    position: absolute;
    top: 100%;
}
 
nav ul ul li {
    float: none;
    border-bottom: 1px solid rgba(44, 135, 184, 0.72);
    position: relative;
}
 
nav ul ul li a {
    padding: 10px 20px;
    color: inherit;
}
 
 
nav ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

kabusuti · Nov 1, 2014

Here is example which works without JavaScript, if you want to check it, you can turn it off in your browsers: how to create animated drop-down menu using only CSS3. It uses CSS3 features to make animation.

Log in or Sign up

How to: Pure CSS dropdown menu with fade

Anarion Ancient Guru

kabusuti Guest

Share This Page