Horizontal Menu w/ Dropdowns


/ Published in: CSS
Save to your folder(s)

Basic style to set up Joomla-format menu as horizontal menu with dropdowns.


Copy this code and paste it in your HTML
  1. #mainnav {
  2.  
  3. }
  4.  
  5. #mainnav ul {
  6. margin: 0;
  7. padding: 0;
  8. list-style-type: none;
  9. }
  10.  
  11. #mainnav li {
  12. float: left;
  13. display: inline;
  14. position: relative;
  15. z-index: 15;
  16. }
  17.  
  18. #mainnav li a {
  19. display: block;
  20. font-size: 16px;
  21. line-height: 1em;
  22. text-decoration: none;
  23. padding: 12px;
  24. }
  25.  
  26. #mainnav .parent ul {
  27. position: absolute;
  28. z-index: 16;
  29. top: 40px;
  30. left: 0;
  31. display: none;
  32. }
  33.  
  34. #mainnav .parent li {
  35. float: none;
  36. display: block;
  37. white-space: nowrap;
  38. }
  39.  
  40. #mainnav .parent li a {
  41. font-size: 14px;
  42. font-weight: normal;
  43. padding: 8px;
  44. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.