Article

How to Create Horizontal Drop Down Menu in Html Using CSS

02 Jun 2015 Kamal Pratap
0 Comments 1651 Views
CSS



Here we explain how to create pure css drop down menu in html, Asp.Net.

How to Create Horizontal Drop Down Menu in Html Using CSS

Put the css code in the head section in web page.

CSS :

 <style type="text/css">
        ul
        {
            width: 100%;
            float: left;
            margin: 0 0 3em 0;
            padding: 0;
            list-style: none;
            background-color: #e2e2e2;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
        }
        ul li
        {
            float: left;
        }
        li ul
        {
            display: none;
        }
        ul li a
        {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            color: #000;
            border-right: 1px solid #ccc;
        }
        ul li a:hover
        {
            color: #c00;
            background-color: #fff;
        }
        li:hover ul
        {
            display: block;
            position: absolute;
            width: 200px;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }
        li:hover li
        {
            float: none;
            border-bottom: 1px solid #ccc;            
        }
        li:hover a
        {
            background: #e2e2e2;
        }
        li:hover li a:hover
        {
            background: #fff;
        }
        #drop-nav li ul li
        {
            border-top: 0px;
        }
    </style>

HTML :

  <ul id="drop-nav">
        <li><a href="#">Support</a></li>
        <li><a href="#">Web Design</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </li>
        <li><a href="#">Content Management</a>
            <ul>
                <li><a href="#">Joomla</a></li>
                <li><a href="#">Drupal</a></li>
                <li><a href="#">WordPress</a></li>
                <li><a href="#">Concrete 5</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">General Inquiries</a></li>
                <li><a href="#">Ask me a Question</a></li>
            </ul>
        </li>
    </ul>

 

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment