Advanced Search

CSS - Navigaiton - Main Nav

/ Published in: CSS
Save to your folder(s)
CSS - Navigaiton - Main Nav

Expand | Embed | Plain Text

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.