Dropdown Menu Html / CSS

Jan 2, 2015 By Mohammed Imtiyaz

Download Live Demo

Introduction

This article will explain you how to create a Dropdown Menu in Html and CSS using Html <div> tags. We will start with designing a container using a <div> tag. The <div> tag will contain id of navigation. A navigation menu always requires standard Html as a basic tool for menu designing. To design the menu we will use a <div>, <ul> an <li> tags.

In this example I have created two different menus. One for English Interface (ltr) and another for Arabic Interface (rtl). These menus can be used in Asp.net Bilingual Web Applications

NOTE: Sample example contains two different menus (Arabic Inteface and English Interface)

Demo

Demo

Css

/* Main menu style */

.nav, .nav ul{

    list-style: none;

    margin: 0;

    padding: 0;

    font-size: 13px;

    font-family: Trebuchet MS, Verdana, Arial;
    /* text-shadow:2px 2px 2px rgba(0,0,0,.3);*/

}

.nav{

    position: relative;

}

.nav ul{

    height: 0;

    left: 0;

    overflow: hidden;

    position: absolute;

    top: 42px;

}

.nav li{

    float: left;

    position: relative;

}

.nav li a{

    background-color: #00688B;

    border: 1px solid transparent;

    color: #FFF;

    display: block;

    line-height: 20px;

    padding: 10px 20px;

    text-decoration: none;

}

.nav li:hover > a{

    background: #FF6103;

    color: #FFF;

}

.nav li:hover ul.subs{

    height: auto;

    width: 130px;

}

.nav ul li{

    width: 100%;

}

.nav ul li a{

    background-color: #00688B;

    border-top: 1px solid #ffffff;

    color: #fff;

    line-height: 1px;

    padding: 5px 20px;

}

.nav li:hover ul li a{

    line-height: 22px;

}

Html

<body dir="ltr">

    <ul class="nav">

        <li><a href="#">Home</a></li>

        <li><a href="#">Products</a>

            <ul class="subs">

                <li><a href="#">Product 1</a></li>

                <li><a href="#">Product 2</a></li>

                <li><a href="#">Product 3</a></li>

            </ul>

        </li>

        <li><a href="#">Client</a>

            <ul class="subs">

                <li><a href="#">Client 1</a></li>

                <li><a href="#">Client 2</a></li>

            </ul>

        </li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</body>

Tested On

Chrome  Firefox  Internet Explorer  Opera  Safari


Post your comment