Advertisement
Guest User

Untitled

a guest
Jul 25th, 2016
50
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. <ul class="top-level-menu">
  2. <li><a href="#">About</a></li>
  3. <li><a href="#">Services</a></li>
  4. <li>
  5. <a href="#">Offices</a>
  6. <ul class="second-level-menu">
  7. <li><a href="#">Chicago</a></li>
  8. <li><a href="#">Los Angeles</a></li>
  9. <li>
  10. <a href="#">New York</a>
  11. <ul class="third-level-menu">
  12. <li><a href="#">Information</a></li>
  13. <li><a href="#">Book a Meeting</a></li>
  14. <li><a href="#">Testimonials</a></li>
  15. <li><a href="#">Jobs</a></li>
  16. </ul>
  17. </li>
  18. <li><a href="#">Seattle</a></li>
  19. </ul>
  20. </li>
  21. <li><a href="#">Contact</a></li>
  22. </ul>
  23.  
  24. /* Menu Styles */
  25.  
  26. .third-level-menu
  27. {
  28. position: absolute;
  29. top: 0;
  30. right: -150px;
  31. width: 150px;
  32. list-style: none;
  33. padding: 0;
  34. margin: 0;
  35. display: none;
  36. }
  37.  
  38. .third-level-menu > li
  39. {
  40. height: 30px;
  41. background: #999999;
  42. }
  43. .third-level-menu > li:hover { background: #CCCCCC; }
  44.  
  45. .second-level-menu
  46. {
  47. position: absolute;
  48. top: 30px;
  49. left: 0;
  50. width: 150px;
  51. list-style: none;
  52. padding: 0;
  53. margin: 0;
  54. display: none;
  55. }
  56.  
  57. .second-level-menu > li
  58. {
  59. position: relative;
  60. height: 30px;
  61. background: #999999;
  62. }
  63. .second-level-menu > li:hover { background: #CCCCCC; }
  64.  
  65. .top-level-menu
  66. {
  67. list-style: none;
  68. padding: 0;
  69. margin: 0;
  70. }
  71.  
  72. .top-level-menu > li
  73. {
  74. position: relative;
  75. float: left;
  76. height: 30px;
  77. width: 150px;
  78. background: #999999;
  79. }
  80. .top-level-menu > li:hover { background: #CCCCCC; }
  81.  
  82. .top-level-menu li:hover > ul
  83. {
  84. /* On hover, display the next level's menu */
  85. display: inline;
  86. }
  87.  
  88.  
  89. /* Menu Link Styles */
  90.  
  91. .top-level-menu a /* Apply to all links inside the multi-level menu */
  92. {
  93. font: bold 14px Arial, Helvetica, sans-serif;
  94. color: #FFFFFF;
  95. text-decoration: none;
  96. padding: 0 0 0 10px;
  97.  
  98. /* Make the link cover the entire list item-container */
  99. display: block;
  100. line-height: 30px;
  101. }
  102. .top-level-menu a:hover { color: #000000; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement