Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating Horizontal Menu Bar Using Html and CSS

    • 0
    • 5
    • 3
    • 2
    • 0
    • 0
    • 0
    • 0
    • 4.58k
    Comment on it

    Hello readers,
    If you want to create a horizontal menu bar in a web page using HTML and CSS follow the below code.

    CSS:-

    <style type="text/css">
    #menu 
    {
        font-family: Arial, Verdana;
        font-size: 14px;
        margin: 0;
        padding: 10px;
        list-style: none;
        width:100%;
        border:1px solid;
        height:16px;
        background:url(images/listbackground.png);
    }
    
    #menu li
    {
        position: relative;    display:inline; margin-left:30px; padding:10px; 
    }
    #menu li a
    {
        text-decoration:none; color:#FFF;}
    
    #menu li:hover
    {
        background:#CCC; padding:10px; color:#FFF;
    }
    #menu li.active{ background:#CCC; padding:10px;}
    #active{ background:#CCC; padding:10px;}
    #menu li .sub{display:none; width:auto; padding:10px;}
    #menu li:hover .sub{display:block; display:inline; margin-left:0px;}
    #menu li:hover .sub li a{padding:10px;}
    .sub li a:hover{background:#000; padding:10px;}
    
    </style>
    

    HTML:-

    <ul id="menu">
          <li><a href="">Home</a></li>
          <li><a href="">About Us</a>
            <ul class="sub" id="active">
                <li  ><a href="">History</a></li>
                <li ><a href="">Introduction</a></li>
                <li ><a href="">About Us</a></li>
            </ul>
          </li>
          <li><a href="">Products</a>
             <ul class="sub" id="active">
                <li ><a href="">Product Category</a></li>
                <li><a href="">Products Name</a></li>
                <li ><a href="">Products Price</a></li>
            </ul>
          </li>
          <li><a href="">Contact</a>
             <ul class="sub" id="active">
                <li><a href="">How to Reach</a></li>
                <li><a href="">Location</a></li>
                <li><a href="">Contact Detail</a></li>
            </ul>
          </li>
    </ul>
    

    Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: