Advanced Search

Very Simple Menu

/ Published in: HTML
Save to your folder(s)
Simple Menu HTML

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. CSS COded
  2.  
  3. <style>
  4. .nav {
  5. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAnCAYAAADO4CKiAAAAj0lEQVQImWWMuw3CQBQENyIjoR4KoA9EQEQbRITU4JQ6/JNPfrJ8On/OgekBIQ/JZSSjnWBHWZahdV1RURQoz/O0yrJEVVWhuq5R0zTIOYfatkVmhrquQ33fI+89CiGgYRgSxnFE0zSheZ5RjBEty5I0hJC+Zpby/vVE2+2Avvcj4qI/bNcd+jxO6H3eI4AfnNF/gVl2jIcAAAAASUVORK5CYII=") repeat-x top left;
  6. width: 100%;
  7. height: 40px;
  8. margin: 0 auto;
  9. display: block;
  10. }
  11. .nav .menu {
  12. margin:0 5px;
  13. }
  14. .nav .menu ul {
  15. list-style-type: none;
  16. float: left;
  17. }
  18. .nav .menu li {
  19. display: block;
  20. margin: 0;
  21. }
  22. .nav .menu li a {
  23. height: 38px;
  24. line-height: 28px;
  25. display: block;
  26. float: left;
  27. padding: 0 10px;
  28. font-weight: 700;
  29. font-size:90%; 
  30. }
  31. .nav .menu li a.current {
  32. padding: 0px 10px;
  33. }
  34. .nav .menu li a {
  35. color: #333;
  36. }
  37. .nav .menu li a:hover {
  38. color: #fff;
  39. background: #f60;
  40. height: 38px;
  41. }
  42. .nav .menu li a.current {
  43. color: #fff;
  44. background: #f60;
  45. }
  46. </style>
  47.  
  48. Markup HTML
  49.  
  50. <div class="nav">
  51. <ul class="menu">
  52. <li><a class="current" title="" href="#">Current</a></li>
  53. <li><a title="" href="#">Menu 1</a></li>
  54. <li><a title="" href="#">Menu 2</a></li>
  55. <li><a title="" href="#">Menu 3</a></li>
  56. <li><a title="" href="#">Menu...</a></li>
  57. </ul>
  58. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.