Amazing css3 dropdown menu

Demo - css3 dropdown menu

HTML

<ul class="css3dropmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Illustrations</a></li>
        </ul>
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

<style>
    ul.css3dropmenu {
        text-align:left;
        font:14px/18px Helvetica Neue, Helvetica, Arial, sans-serif;
        display:block;
        margin:0; 
        padding:0;
        list-style:none;
        background:#FFF; 
        border:solid 1px #eee;
        clear:both;
        box-shadow:0 0 2px rgba(0,0,0, 0.15);
    }
    ul.css3dropmenu li{ 
        display:inline-block; 
        vertical-align:top; 
        position:relative; 
        z-index:111;
    }
    ul.css3dropmenu a{ 
        display:inline-block; 
        padding:15px 10px; 
        text-decoration:none; 
        color:#666; 
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    } 
    ul.css3dropmenu a:hover, 
    ul.css3dropmenu li:hover a{
        background-color:#666; 
        color:#FFF;
    }
    ul.css3dropmenu ul{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        background:#666;
        opacity:0;
        visibility:hidden;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s; width:160px; 
    }
    ul.css3dropmenu ul li, 
    ul.css3dropmenu ul li a {
        display:block;
    }
    ul.css3dropmenu ul li a {
        padding:10px;
    }
    ul.css3dropmenu ul li a:hover{
        background:#000;
        padding-left:20px; 
    }
    ul.css3dropmenu li:hover > ul {
        display:block;
        opacity:1;
        visibility:visible;
    }
</style>

  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.