CSS Horizontal Menu Bar Examples

02 Jun 2015 Kamal Pratap
0 Comments 2894 Views

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.


        /* Begin Horizontal Menu Bar Styling */
            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. */


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


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.


No coments found to display!

Leave a Comment