Introduction

In this article, you will learn how to create a Vertical Menu Bar using CSS.
In this article, only CSS is used. Also, onMouseHover shows the Sub Menu.
The following code can be used to create a Vertical Menu Bar:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>vertical menu</title>
  5. <style>
  6. *
  7. {
  8. margin: 0px;
  9. padding: 0px;
  10. }
  11. body
  12. {
  13. background: #fff;
  14. font-family: Arial, Helvetica, sans-serif;
  15. font-size: 16px;
  16. font-weight: lighter;
  17. text-transform: capitalize;
  18. color: #FFFFFF;
  19. }
  20. #main
  21. {
  22. width: 90%;
  23. height: 500px;
  24. margin: 0px auto;
  25. }
  26. #menubox
  27. {
  28. width: 100%;
  29. }
  30. .menu ul
  31. {
  32. width: 200px;
  33. background: #6633FF;
  34. }
  35. .menu ul li
  36. {
  37. list-style: none;
  38. position: relative;
  39. }
  40. .menu ul li a
  41. {
  42. text-decoration: none;
  43. padding: 14px 30px 14px 30px;
  44. color: #fff;
  45. display: block;
  46. border-bottom: 1px solid #fff;
  47. }
  48. .menu ul li ul
  49. {
  50. display: none;
  51. }
  52. .menu ul li:hover ul
  53. {
  54. position: absolute;
  55. left: 180px;
  56. top: -47px;
  57. display: block;
  58. background: #0033CC;
  59. }
  60. .menu ul li ul li
  61. {
  62. position: relative;
  63. }
  64. .menu ul li:hover
  65. {
  66. background: #0033CC;
  67. color: #FFFFFF;
  68. }
  69. .menu ul li:hover ul li ul
  70. {
  71. display: none;
  72. }
  74. .menu ul li ul li:hover, .menu ul li ul li a:hover
  75. {
  76. background: #003366;
  77. }
  78. .menu ul li ul li ul
  79. {
  80. display: block;
  81. }
  82. .menu ul li ul li:hover ul
  83. {
  84. position: absolute;
  85. left: 180px;
  86. top: -40px;
  87. display: block;
  88. background: #003366;
  89. }
  90. .menu ul li ul li ul li:hover, .menu ul li ul li ul li a:hover
  91. {
  92. background: #0033CC;
  93. }
  94. </style>
  95. </head>
  96. <body>
  97. <div id="main">
  98. <div id="menubox">
  99. <div class="menu">
  100. <ul>
  101. <li><a href="#">home</a></li>
  102. <li><a href="#">about Us</a></li>
  103. <li><a href="#">service</a>
  104. <ul>
  105. <li><a href="#">service</a></li>
  106. <li><a href="#">service</a></li>
  107. <li><a href="#">service</a></li>
  108. <li><a href="#">service</a>
  109. <ul>
  110. <li><a href="#">service</a></li>
  111. <li><a href="#">service</a></li>
  112. <li><a href="#">service</a></li>
  113. <li><a href="#">service</a></li>
  114. </ul>
  115. </li>
  116. </ul>
  117. </li>
  118. <li><a href="#">Blog</a></li>
  119. <li><a href="#">catagory</a></li>
  120. <li><a href="#">contect Us </a></li>
  121. </ul>
  122. </div>
  123. </div>
  124. </div>
  125. </body>
  126. </html>