Horizontal and tabbed CSS menu with sub menu

This article explains and shows examples of horizontal CSS menus with sub menus (or nested lists as this is also called). The menus are made without absolute positioning.

In the article How to center a tabbed horizontal CSS menu the alignment of the CSS menu was made by using text-align. This menu is built on the same concept, and unlike many other nested CSS menus with a sub menu this one is not using position: absolute for the sub menu. A combination between margin, float and text-align is instead used. Notice that the active/selected page simulated in the CSS menu is not a link. The menu is demonstrated below:


The HTML used in the menu

  1. <ul class="Menu">
  2. <li><a href="#">Main tab 1</a></li>
  3. <li id="active">Main tab 2
  4. <ul class="subMenu">
  5. <li id="subActive">Active sub tab link</li>
  6. <li><a href="#">Sub tab link 2</a></li>
  7. <li><a href="#">Sub tab link 3</a></li>
  8. <li><a href="#">Sub tab link 4</a></li>
  9. </ul>
  10. </li>
  11. <li><a href="#">Main tab 3</a></li>
  12. <li><a href="#">Main tab 4</a></li>
  13. </ul>

The CSS used in the menu

  1. * /* "Universal rule". Set's border, padding and margin to 0 for all CSS values*/
  2. padding: 0;
  3. margin: 0;
  4. border: 0;
  5. }
  6. .Menu {
  7. font-family: Arial, sans-serif;
  8. border-bottom: 1px solid #ccc;
  9. font-size: 11px;
  10. text-align: left; /* We are using text-align: left on ul to left align our menu to the page. If you want the menu aligned centered or right just change text-align to either center or right */
  11. margin: 5px 0 5px 10px;
  12. padding: 0 0 3px 0;
  13. }
  14. .Menu li {
  15. margin: 0 2px 0 0;
  16. border-bottom: none;
  17. display: inline; /* Menu links are horizontally aligned using display: inline */
  18. }
  19. .Menu li a {
  20. margin: 0 -2px 0 0;
  21. padding: 3px 12px 3px 12px; /* Display: block won't work in this example, instead we are using padding */
  22. color: #666;
  23. text-decoration: none;
  24. border: 1px solid #ccc;
  25. background: #f5f5f5;
  26. }
  27. .Menu li a:hover {
  28. background: #ededed;
  29. color: #000;
  30. }
  31. .Menu li#active {
  32. margin: 0 3px 0 0;
  33. padding: 3px 6px 3px 8px; /* Display: block won't work in this example, instead we are using padding */
  34. background: white;
  35. border: 1px solid #ccc;
  36. border-bottom: 1px solid white;
  37. }
  38. .Menu li a:hover {
  39. background: #ededed;
  40. color: #000;
  41. }
  42. .Menu .subMenu
  43. float: left;
  44. text-align: left; /* If both menus are going to be left-aligned we really don't need to use text-align: left on the sub menu, since this menu will inherit the alignment from .Menu */
  45. width: 100%;
  46. margin: 6px 0 5px 0;
  47. padding: 3px 0 3px 0;
  48. border-bottom: 2px solid #F89226;
  49. }
  50. * html .Menu .subMenu {
  51. margin: 2px 0 5px 0; /* IE hack */
  52. }
  53. .Menu .subMenu li {
  54. padding: 3px 0 3px 0;
  55. border: 0;
  56. }
  57. .Menu .subMenu li a {
  58. border: 0;
  59. background-color: #fc9;
  60. }
  61. .Menu .subMenu li a:hover {
  62. background: #d4de7c;
  63. }
  64. .Menu .subMenu li#subActive {
  65. padding: 3px 6px 3px 8px;
  66. font-weight: bold;
  67. }

Centered nested CSS menu

Below is the same menu, only difference in the CSS is text-align: center used on ul.Menu.

Some final words about this CSS menu

If you look in the source code you will see that there are some differences between the code in the article and the source code. This is because the menu is presented within this article.

Editors note about this CSS menu: I don't know if is particular method is presented before (at least I haven't seen it), I came just came up with this CSS menu solution while I were working on a new web site.

Publisert: 22-01-2007
Gi Tilbakemelding