Post
Ask Question

Horizontal Menu Using Pure CSS

Introduction

 
In this article, you will learn how to create a Horizontal Menu Bar using CSS.
 
In this article, only CSS is used to create the Horizontal Menu Bar and onMouseHover is used to show the Sub Menu.
 
The code given below can be used to create a Horizontal Menu Bar:
  1. <!doctype html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <title>horizontal menubar</title>  
  6.         <style>  
  7.         * {  
  8.             margin: 0px;  
  9.             padding: 0px;  
  10.         }  
  11.   
  12.         body {  
  13.             font-family: Arial, Helvetica, sans-serif;  
  14.             font-size: 12px;  
  15.             font-style: normal;  
  16.             color: #FFFFFF;  
  17.             text-transform: capitalize;  
  18.             background: #003333;  
  19.         }  
  20.   
  21.         #main {  
  22.             width: 100%;  
  23.             overflow: hidden;  
  24.         }  
  25.   
  26.         #header {  
  27.             width: 100%;  
  28.             height: 112px;  
  29.             border-bottom: 1px solid #FFCC33;  
  30.             border-radius: 10px;  
  31.         }  
  32.   
  33.         .logo {  
  34.             padding-top: 12px;  
  35.         }  
  36.   
  37.         < !---->#menuCtr {  
  38.             height: 40px;  
  39.             width: 100%;  
  40.             border-bottom: 1px solid #FFCC33;  
  41.             border-top: 1px solid #FFCC33;  
  42.             border-radius: 10px;  
  43.         }  
  44.   
  45.         .menubox {  
  46.             height: 40px;  
  47.             margin: 0 auto;  
  48.             width: 980px;  
  49.         }  
  50.   
  51.         .menu {  
  52.             list-style: none;  
  53.             margin: 2px 0;  
  54.         }  
  55.   
  56.         .menu li {  
  57.             float: left;  
  58.             position: relative;  
  59.         }  
  60.   
  61.         .menu li a {  
  62.             padding: 10px 28px 10px 28px;  
  63.             display: block;  
  64.             background: #FF9933;  
  65.             text-decoration: none;  
  66.             color: #FFFFFF;  
  67.             font-weight: bold;  
  68.             font-size: 13px;  
  69.             border-left: 1px solid #330066;  
  70.         }  
  71.   
  72.         .menu li a:hover,  
  73.         .menu li.first a {  
  74.             background: #330066;  
  75.         }  
  76.   
  77.         .menu ul {  
  78.             top: 36px;  
  79.             position: absolute;  
  80.         }  
  81.   
  82.         .menu ul li {  
  83.             float: none;  
  84.             display: none;  
  85.         }  
  86.   
  87.         .menu ul li a {  
  88.             border: none;  
  89.             margin: 1px 0px;  
  90.         }  
  91.   
  92.         .menu li:hover>a {  
  93.             background: #330066;  
  94.         }  
  95.   
  96.         .menu li:hover>ul li a:hover {  
  97.             background: #330066;  
  98.         }  
  99.   
  100.         .menu li:hover>ul li,  
  101.         .menu li:hover>ul li a {  
  102.             display: block;  
  103.             background: #FF9933;  
  104.         }  
  105.   
  106.         #slideCtr {  
  107.             height: 400px;  
  108.             width: 980px;  
  109.             margin-top: 12px;  
  110.             border-radius: 10px;  
  111.             border: 1px solid #FFCC00;  
  112.             margin: 0 auto;  
  113.             border-top: none;  
  114.         }  
  115.         </style>  
  116.     </head>  
  117.   
  118.     <body>  
  119.         <div id="main">  
  120.             <div id="header">  
  121.                 <center>  
  122.                     <img src="logo.png" class="logo" />  
  123.                 </center>  
  124.             </div>  
  125.             <div id="menuCtr">  
  126.                 <div class="menubox">  
  127.                     <ul class="menu">  
  128.                         <li class="first"> <a href="#">home</a></li>  
  129.                         <li> <a href="#">about us</a>  
  130.                             <ul>  
  131.                                 <li><a href="#">css</a></li>  
  132.                                 <li><a href="#">application</a></li>  
  133.                                 <li><a href="#">tageinspector</a></li>  
  134.                                 <li><a href="#">properties</a></li>  
  135.                                 <li><a href="#">aboutus</a></li>  
  136.                             </ul>  
  137.                         </li>  
  138.                         <li> <a href="#">service</a></li>  
  139.                         <li> <a href="#">blog</a></li>  
  140.                         <li> <a href="#">gallery</a></li>  
  141.                         <li> <a href="#">contect us</a></li>  
  142.                     </ul>  
  143.                 </div>  
  144.             </div>  
  145.             <div id="slideCtr"> </div>  
  146.         </div>  
  147.     </body>  
  148.     </head>  
  149.   
  150. </html> 
    Output
     
    horizontal.jpg


    Similar Articles