Advanced Search

Freedom's Nav CSS

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* MenuBegin:(SampleMenu) */
  2. ul.(SampleMenu) { margin: 0; border: 0; padding: 0; list-style: none; line-height: 22px; }
  3. ul.(SampleMenu) li { margin: 0; border: 0; padding: 0; float: left;/*Gecko*/ display: inline; list-style: none; position: relative; }
  4. ul.(SampleMenu) ul { margin: 0; border: 0; padding: 0; list-style: none; width: 140px; display: none; position: absolute; top: 22px; left: 0; }
  5. ul.(SampleMenu) ul li { position: relative; display: block !important; display: inline;/*For IE*/ float: left;/*IE 7*/ position: relative; }
  6.  
  7. /* 1st Level */
  8. ul.(SampleMenu) a { color: #000; background: #ffc; text-decoration: none; width: 120px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; border-right: 1px solid #ddd; text-align: left; padding: 0px 10px; font: normal 11px/22px Verdana, Geneva, sans-serif; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; height: auto !important; height: 1%; /*For IE*/ }
  9. ul.(SampleMenu) a:hover,
  10. ul.(SampleMenu) li:hover a,
  11. ul.(SampleMenu) a:hover,
  12. ul.(SampleMenu) li.over a { color: #fff; background: #777; text-decoration: none; }
  13. ul.(SampleMenu) a.first { border-left: 1px solid #aaa; }
  14. ul.(SampleMenu) a.last { border-right: 1px solid #aaa; }
  15.  
  16. /* 2nd Level */
  17. ul.(SampleMenu) li:hover li a,
  18. ul.(SampleMenu) li.over li a { color: #000; background: #ffc; text-decoration: none; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-top: 1px solid #ddd; border-bottom:0; float: none; }
  19. ul.(SampleMenu) li:hover li a:hover,
  20. ul.(SampleMenu) li:hover li:hover a,
  21. ul.(SampleMenu) li.over li a:hover,
  22. ul.(SampleMenu) li.over li.over a { color: #fff; background: #777; text-decoration: none; }
  23. ul.(SampleMenu) li:hover li a.first,ul.(SampleMenu) li.over li a.first { border-top: 1px solid #aaa; }
  24. ul.(SampleMenu) li:hover li a.last,ul.(SampleMenu) li.over li a.last { border-bottom: 1px solid #aaa; }
  25.  
  26. /* 3rd Level */
  27. ul.(SampleMenu) li:hover li:hover li a,
  28. ul.(SampleMenu) li.over li.over li a { color: #000; background: #ffc; text-decoration: none; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-top: 1px solid #ddd; border-bottom:0; }
  29. ul.(SampleMenu) li:hover li:hover li a:hover,
  30. ul.(SampleMenu) li:hover li:hover li:hover a,
  31. ul.(SampleMenu) li.over li.over li a:hover,
  32. ul.(SampleMenu) li.over li.over li.over a { color: #fff; background: #777; text-decoration: none; }
  33. ul.(SampleMenu) li:hover li:hover li a.first,ul.(SampleMenu) li.over li.over li a.first { border-top: 1px solid #aaa; }
  34. ul.(SampleMenu) li:hover li:hover li a.last,ul.(SampleMenu) li.over li.over li a.last { border-bottom: 1px solid #aaa; }
  35.  
  36. ul.(SampleMenu) ul ul { display: none; position: absolute; top: 0; left: 141px; }
  37.  
  38. /* Do Not Move - Must Come Before display:block for Gecko */
  39. ul.(SampleMenu) li:hover ul ul,ul.(SampleMenu) li.over ul ul { display: none; }
  40. ul.(SampleMenu) li:hover ul,ul.(SampleMenu) ul li:hover ul,ul.(SampleMenu) li.over ul,ul.(SampleMenu) ul li.over ul { display: block; }
  41. ul.(SampleMenu) .nav ul :after /*IE 7*/ { clear: both; display: block; font: 1px/0px serif; content: ; height: 0; visibility: hidden; }
  42. /* MenuEnd:(SampleMenu) */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.