Article

CSS Horizontal Menu Bar Examples

02 Jun 2015 Kamal Pratap
0 Comments 1674 Views
CSS



Here we explain how to create simple horizontal menu using CSS(Cascading Style Sheet) in webpage.

CSS Horizontal Menu Bar Examples

Put the CSS in the head section of the webpage.

CSS :

 <style>
        /* Begin Horizontal Menu Bar Styling */
        #nav
        {
            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;
        }
        #nav li
        {
            float: left;
        }
        #nav li a
        {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            color: #000;
            border-right: 1px solid #ccc;
        }
        #nav li a:hover
        {
            color: #c00;
            background-color: #fff;
        }
        /* End Horizontal Menu Bar styling. */
    </style>

HTML :

      <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Service</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></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