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