basic Horizontal Nav


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



Copy this code and paste it in your HTML
  1. <ul id="nav">
  2. <li><a href="#"></a></li>
  3. <li><a href="#"></a></li>
  4. <li><a href="#"></a></li>
  5. <li><a href="#"></a></li>
  6. <li><a href="#"></a></li>
  7. </ul>
  8.  
  9. #nav { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; }
  10. #nav li { float: left; }
  11. #nav {
  12. width: 100%;
  13. float: left;
  14. margin: 0 0 3em 0;
  15. padding: 0;
  16. list-style: none;
  17. background-color: #f2f2f2;
  18. border-bottom: 1px solid #ccc;
  19. border-top: 1px solid #ccc;
  20. }
  21.  
  22. #nav li a {
  23. display: block;
  24. padding: 8px 15px;
  25. text-decoration: none;
  26. font-weight: bold;
  27. color: #069;
  28. border-right: 1px solid #ccc;
  29. }
  30.  
  31. #nav li a:hover {
  32. color: #c00;
  33. background-color: #fff;
  34. }
  35.  
  36. #nav {
  37. width: 100%;
  38. float: left;
  39. margin: 0 0 3em 0;
  40. padding: 0;
  41. list-style: none;
  42. background-color: #f2f2f2;
  43. border-bottom: 1px solid #ccc;
  44. border-top: 1px solid #ccc;
  45. }
  46. #nav li { float: left; }
  47. #nav li a {
  48. display: block;
  49. padding: 8px 15px;
  50. text-decoration: none;
  51. font-weight: bold;
  52. color: #069;
  53. border-right: 1px solid #ccc;
  54. }
  55. #nav li a:hover { color: #c00; background-color: #fff; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.