Post
Ask Question

Menu-Bar Style in CSS

Introduction

 
In this article, you will learn how to insert an image in a list and anchor tag, like: <a href="#">
 
In this article I used the following images:

homeBg.png
 
home_hover.png
 
vertical.png
 
verticalBg.png
 
If you want a reversed image then you need to use:
  1. #menu ul li ul li ul {  
  2.   display: none !important;  
  3.   right: 195px;  
  4.   top: 0px;  
  5.   position: absolute;  
  6.   margin-right: 13px;  
  7. }  
  8.   
  9. #menu ul li ul li.vertical a {  
  10.   background: url(verticald.png) no-repeat !important;  
  11.   margin-right: -13px;  
  12. }  
  13.   
  14. #menu ul li ul li.vertical:hover a {  
  15.   background: url(vertic.jpg) no-repeat !important;  
  16. } 
vertic.jpg
 
verticald.jpg
 
The full code is given below.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <title>style</title>  
  6.         <style>  
  7.         * {  
  8.             margin: 0px;  
  9.             padding: 0px;  
  10.         }  
  11.   
  12.         body {  
  13.             font-family: Arial, Helvetica, sans-serif;  
  14.             font-size: 18px;  
  15.             font-weight: lighter;  
  16.             text-transform: capitalize;  
  17.             color: #fff;  
  18.         }  
  19.   
  20.         #main {  
  21.             width: 100%;  
  22.             margin: 0px auto;  
  23.             height: 600px;  
  24.         }  
  25.   
  26.         #menubox {  
  27.             margin-top: 15px;  
  28.             height: 50px;  
  29.             background: #666666;  
  30.             width: 100%;  
  31.         }  
  32.   
  33.         #menu {  
  34.             margin: 0px auto;  
  35.             width: 70%;  
  36.         }  
  37.   
  38.         #menu ul {  
  39.             list-style: none;  
  40.         }  
  41.   
  42.         #menu ul li {  
  43.             float: left;  
  44.             position: relative;  
  45.         }  
  46.   
  47.         #menu ul li a {  
  48.             text-decoration: none;  
  49.             display: block;  
  50.             padding: 14px 50px 14px 50px;  
  51.             background: #3300CC;  
  52.             color: #FFFFFF;  
  53.         }  
  54.   
  55.         #menu ul li a:hover {  
  56.             background: #003366;  
  57.         }  
  58.   
  59.         #menu ul li ul {  
  60.             position: absolute;  
  61.             display: none;  
  62.             top: 27px;  
  63.             width: 200px;  
  64.         }  
  65.   
  66.         #menu ul li ul li {  
  67.             position: relative;  
  68.             float: none;  
  69.         }  
  70.   
  71.         #menu ul li.home a {  
  72.             background: url(homeBg.png)left top no-repeat !important;  
  73.             padding: 14px 10px;  
  74.             margin-top: 12px;  
  75.             height: 34px;  
  76.             width: 180px;  
  77.             display: block;  
  78.         }  
  79.   
  80.         #menu ul li ul li a {  
  81.             border-bottom: 1px solid #666666;  
  82.             background: #b2a9b0;  
  83.             padding: 14px 10px;  
  84.         }  
  85.   
  86.         #menu ul li:hover ul {  
  87.             display: block;  
  88.         }  
  89.   
  90.         #menu ul li.home:hover a {  
  91.             background: url(home_hover.png) left top no-repeat !important;  
  92.         }  
  93.   
  94.         #menu ul li ul li ul {  
  95.             display: none !important;  
  96.             left: 195px;  
  97.             top: 0px;  
  98.             position: absolute;  
  99.             margin-left: 13px;  
  100.         }  
  101.   
  102.         #menu ul li ul li ul li {  
  103.             position: relative;  
  104.         }  
  105.   
  106.         #menu ul li ul li ul li a {}  
  107.   
  108.         #menu ul li ul li.vertical a {  
  109.             background: url(verticalBg.png) no-repeat !important;  
  110.             margin-left: -13px;  
  111.         }  
  112.   
  113.         #menu ul li ul li:hover ul {  
  114.             display: block !important;  
  115.         }  
  116.   
  117.         #menu ul li ul li.vertical:hover a {  
  118.             background: url(vertical.png) no-repeat !important;  
  119.         }  
  120.   
  121.         #menu ul li ul li ul li ul {  
  122.             visibility: hidden;  
  123.             position: absolute;  
  124.             left: 195px;  
  125.         }  
  126.   
  127.         #menu ul li ul li ul li:hover ul {  
  128.             visibility: visible;  
  129.         }  
  130.         </style>  
  131.     </head>  
  132.   
  133.     <body>  
  134.         <div id="main">  
  135.             <div id="menubox">  
  136.                 <div id="menu">  
  137.                     <ul>  
  138.                         <li><a href="#">home</a></li>  
  139.                         <li><a href="#">aboutUs</a>  
  140.                             <ul>  
  141.                                 <li class="home"><a href="#" class="home">design</a></li>  
  142.                                 <li><a href="#">home</a>  
  143.                                     <ul>  
  144.                                         <li class="vertical"><a href="#">split</a></li>  
  145.                                         <li><a href="#">commands</a></li>  
  146.                                         <li><a href="#">window</a></li>  
  147.                                         <li><a href="#">edit</a>  
  148.                                             <ul>  
  149.                                                 <li class="vertical"><a href="#">home</a></li>  
  150.                                                 <li><a href="#">Modify</a></li>  
  151.                                                 <li><a href="#">text</a></li>  
  152.                                                 <li><a href="#">insert</a></li>  
  153.                                             </ul>  
  154.                                         </li>  
  155.                                     </ul>  
  156.                                 </li>  
  157.                                 <li><a href="#">css</a></li>  
  158.                                 <li><a href="#">home</a></li>  
  159.                             </ul>  
  160.                         </li>  
  161.                         <li><a href="#">service</a></li>  
  162.                         <li><a href="#">application</a>  
  163.                             <ul>  
  164.                                 <li class="home"><a href="#" class="home">common</a></li>  
  165.                                 <li><a href="#">home</a>  
  166.                                     <ul>  
  167.                                         <li class="vertical"><a href="#">winsow</a></li>  
  168.                                         <li><a href="#">files </a></li>  
  169.                                         <li><a href="#">snippers</a></li>  
  170.                                         <li><a href="#">network</a>  
  171.                                         </li>  
  172.                                     </ul>  
  173.                                 </li>  
  174.                                 <li><a href="#">site</a></li>  
  175.                                 <li><a href="#">view</a>  
  176.                                 </li>  
  177.                             </ul>  
  178.                         </li>  
  179.                         <li><a href="#">company</a></li>  
  180.                         <li><a href="#">contect us</a>  
  181.                         </li>  
  182.                     </ul>  
  183.                 </div>  
  184.             </div>  
  185.         </div>  
  186.     </body>  
  187.   
  188. </html> 
Output
 
Clipboard01.jpg


Similar Articles