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.


ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 0px;
    list-style: none;
ul li {
    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;
    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;
    border-bottom:1px solid #555; 
ul li ul li a{
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;


    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
            <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>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>

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..

About Author

My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.