CSS - Navigaiton - Main Nav


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

CSS - Navigaiton - Main Nav


Copy this code and paste it in your HTML
  1. nav.main ul li a span i {
  2. position:absolute;
  3. top:12px; right:10px;
  4. }
  5.  
  6. nav.main ul li.has_child a span {
  7. padding-right:20px;
  8. }
  9.  
  10. @media (min-width:768px) {
  11.  
  12. nav.main {
  13. height:40px;
  14. width:100%;
  15. position:relative;
  16. right:0;
  17. left:0;
  18. z-index:300;
  19. margin-bottom:20px;
  20. }
  21. header nav.main {
  22. top:100px;
  23. margin-bottom:0;
  24. }
  25. nav.main ul {
  26. z-index:400;
  27. overflow:visible;
  28. line-height:1;
  29. }
  30. nav.main ul li {
  31. float:left;
  32. display:inline;
  33. position:relative;
  34. }
  35. nav.main ul li a {
  36. display:block;
  37. float:left;
  38. height:27px;
  39. padding:13px 10px 0;
  40. }
  41. nav.main ul li a:hover,
  42. nav.main ul li:hover a {
  43. }
  44. nav.main ul li:hover a.active,
  45. nav.main ul li a.active:hover {
  46. }
  47.  
  48.  
  49. /* DROP DOWN 2ND LEVEL */
  50. nav.main ul li ul {
  51. position: absolute;
  52. left: -999em;
  53. top: 40px;
  54. z-index: 2000;
  55. width: 200px;
  56. height:auto;
  57. padding:0;
  58. display:block;
  59. border-top:0;
  60. }
  61. nav.main ul li ul li {
  62. float: none;
  63. width: auto;
  64. display:block;
  65. border:0 none!important;
  66. }
  67. nav.main ul li ul li a {
  68. float: none;
  69. display: block;
  70. height:auto;
  71. width:auto;
  72. line-height:1.3;
  73. font-weight:normal;
  74. border:0 none!important;
  75. padding:10px;
  76. margin:0;
  77. }
  78. nav.main ul li ul li a span {
  79. display:block;
  80. background:none!important;
  81. }
  82.  
  83. nav.main ul li:hover ul ul,
  84. nav.main ul li.hover ul ul {
  85. left: -999em;
  86. padding:0;
  87. border-top:0;
  88. }
  89. nav.main ul li:hover ul ul li a.active,
  90. nav.main ul li.hover ul ul li a.active {
  91. font-weight:bold;
  92. }
  93. nav.main ul li.hover ul ul li a span {
  94. background:none!important;
  95. }
  96.  
  97. nav.main ul li li:hover ul,
  98. nav.main ul li li.hover ul {
  99. left:200px;
  100. top:0;
  101. }
  102.  
  103. /* Hover effects */
  104. nav.main ul li ul li a:hover {
  105. text-decoration:underline!important;
  106. }
  107. /* Method of popping out the sub-section */
  108. nav.main ul li:hover ul,
  109. nav.main ul li.hover ul {
  110. left: -1px;
  111. }
  112.  
  113. }
  114.  
  115. @media (min-width:768px) and (max-width:1023px) {
  116.  
  117. nav.main ul li a i {
  118. display:none;
  119. }
  120.  
  121. }
  122.  
  123. @media (max-width:767px) {
  124.  
  125. nav.main ul {
  126. position:relative;
  127. clear:both;
  128. }
  129. nav.main ul ul {
  130. display:none!important;
  131. }
  132. nav.main ul li {
  133. display:block;
  134. }
  135. nav.main ul li a {
  136. display:block;
  137. padding:10px 0;
  138. }
  139. nav.main ul li.has_child a span {
  140. background-image:none;
  141. }
  142.  
  143. nav.main ul li a i {
  144. display:none;
  145. }
  146.  
  147. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.