over 8 years ago
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 :)
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)