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. }
  9. #menu ul li ul li.vertical a {
  10. background: url(verticald.png) no-repeat !important;
  11. margin-right: -13px;
  12. }
  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>
  4. <head>
  5. <title>style</title>
  6. <style>
  7. * {
  8. margin: 0px;
  9. padding: 0px;
  10. }
  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. }
  20. #main {
  21. width: 100%;
  22. margin: 0px auto;
  23. height: 600px;
  24. }
  26. #menubox {
  27. margin-top: 15px;
  28. height: 50px;
  29. background: #666666;
  30. width: 100%;
  31. }
  33. #menu {
  34. margin: 0px auto;
  35. width: 70%;
  36. }
  38. #menu ul {
  39. list-style: none;
  40. }
  42. #menu ul li {
  43. float: left;
  44. position: relative;
  45. }
  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. }
  55. #menu ul li a:hover {
  56. background: #003366;
  57. }
  59. #menu ul li ul {
  60. position: absolute;
  61. display: none;
  62. top: 27px;
  63. width: 200px;
  64. }
  66. #menu ul li ul li {
  67. position: relative;
  68. float: none;
  69. }
  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. }
  80. #menu ul li ul li a {
  81. border-bottom: 1px solid #666666;
  82. background: #b2a9b0;
  83. padding: 14px 10px;
  84. }
  86. #menu ul li:hover ul {
  87. display: block;
  88. }
  90. #menu ul li.home:hover a {
  91. background: url(home_hover.png) left top no-repeat !important;
  92. }
  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. }
  102. #menu ul li ul li ul li {
  103. position: relative;
  104. }
  106. #menu ul li ul li ul li a {}
  108. #menu ul li ul li.vertical a {
  109. background: url(verticalBg.png) no-repeat !important;
  110. margin-left: -13px;
  111. }
  113. #menu ul li ul li:hover ul {
  114. display: block !important;
  115. }
  117. #menu ul li ul li.vertical:hover a {
  118. background: url(vertical.png) no-repeat !important;
  119. }
  121. #menu ul li ul li ul li ul {
  122. visibility: hidden;
  123. position: absolute;
  124. left: 195px;
  125. }
  127. #menu ul li ul li ul li:hover ul {
  128. visibility: visible;
  129. }
  130. </style>
  131. </head>
  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>
  188. </html>
Output
Clipboard01.jpg