Beautiful Drop Down Menu CSS

Using The CSS we can create lot of type css menus. In this article, we’ll show you how to create simple beautiful drop down menu in css. cover some of the shape effects you can make with relatively little CSS code. that drop down menu will be make attractive to your html page.

Lets start create drop down menu, You can also view live demo and download code using given downloading link below of article page.

CSS CODE FOR DROP DOWN MENU

ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 0px;
    list-style: none;
}
ul li {
    font-size:14px;
    font-family:sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;    
}
ul li a{
    padding: 15px 20px;
    text-decoration:none;
    color:#000;
    line-height: 48px;
}

ul li a:hover {
    color: #fff;
    background: linear-gradient(to right, #FFFFFF 50%, #555555 50%);
    background-size: 200% 100%;
    background-position:left bottom;
    transition:all 2s ease;
    background-position:right bottom;
}
ul li ul {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    background: #FFF;
    -webkit-transition: all 0.5s ease-in-out 3s;
    -moz-transition: all 0.5s ease-in-out 3s;
    -o-transition: all 0.5s ease-in-out 3s;
}
ul li ul li { 
    display: block; 
    color: #fff;
    float:left;
    width:100%;
    border-bottom:1px solid #555; 
}
ul li ul li a{
    float:left;
    width:100%;
    padding:0px;
    text-align:center;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease-in-out 3s;
    -moz-transition: all 0.5s ease-in-out 3s;
    -o-transition: all 0.5s ease-in-out 3s;
}

HTML CODE FOR DROP DOWN MENU

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
        <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">Seo</a></li>
        </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

You Can View Demo and download Source Code of This Tutorial

If You have any question and problem in this code feel free, leave comment below! SHARE WITH YOUR FRIENDS..