Advanced Search

Return to Snippet

Revision: 67840
at October 31, 2014 03:04 by madebycrunch
Updated Code 
nav.main ul li a span i {
	position:absolute;
	top:12px; right:10px;
	}
	
nav.main ul li.has_child a span { 
	padding-right:20px;
	}
		
@media (min-width:768px) {

nav.main {
	height:40px;
	width:100%;
	position:relative;
	right:0;
	left:0;
	z-index:300;
	margin-bottom:20px;
	}
header nav.main {
	top:100px;
	margin-bottom:0;
	}
nav.main ul {
	z-index:400;
	overflow:visible;
	line-height:1;
	}
nav.main ul li {
	float:left;
	display:inline;
	position:relative;
	}
nav.main ul li a {
	display:block;
	float:left;
	height:27px;
	padding:13px 10px 0;
	}
nav.main ul li a:hover,
nav.main ul li:hover a {
	}
nav.main ul li:hover a.active,
nav.main ul li a.active:hover {
	}


/* DROP DOWN 2ND LEVEL */
nav.main ul li ul {
	position: absolute;
	left: -999em;
	top: 40px;
	z-index: 2000;
	width: 200px;
	height:auto;
	padding:0;
	display:block;
	border-top:0;
	}
nav.main ul li ul li {
	float: none;
	width: auto;
	display:block;
	border:0 none!important;
	}
nav.main ul li ul li a {
	float: none;
	display: block;
	height:auto;
	width:auto;
	line-height:1.3;
	font-weight:normal;
	border:0 none!important;
	padding:10px;
	margin:0;
	}
nav.main ul li ul li a span { 
	display:block;
	background:none!important;
	}

nav.main ul li:hover ul ul,
nav.main ul li.hover ul ul {
	left: -999em;
	padding:0;
	border-top:0;
	}
nav.main ul li:hover ul ul li a.active,
nav.main ul li.hover ul ul li a.active {
	font-weight:bold;
	}
nav.main ul li.hover ul ul li a span {
	background:none!important;
	}

nav.main ul li li:hover ul,
nav.main ul li li.hover ul {
	left:200px;
	top:0;
	}

/* Hover effects */
nav.main ul li ul li a:hover {
	text-decoration:underline!important;
	}
/* Method of popping out the sub-section */
nav.main ul li:hover ul,
nav.main ul li.hover ul {
	left: -1px;
	}
	
}
		
@media (min-width:768px) and (max-width:1023px) {
	
nav.main ul li a i {
	display:none;
	}

}

@media (max-width:767px) {
	
nav.main ul {
	position:relative;
	clear:both;
	}
nav.main ul ul {
	display:none!important;
	}
nav.main ul li {
	display:block;
	}
nav.main ul li a {
	display:block;
	padding:10px 0;
	}
nav.main ul li.has_child a span {
	background-image:none;
	}
	
nav.main ul li a i {
	display:none;
	}

}

Revision: 67839
at October 31, 2014 03:02 by madebycrunch
Initial Code 
nav.main ul li a span i {
	position:absolute;
	top:12px; right:10px;
	}
	
nav.main ul li.has_child a span { 
	padding-right:20px;
	}	
		
@media (min-width:1024px) {
}
		
@media (min-width:768px) {

nav.main {
	height:40px;
	width:100%;
	position:relative;
	right:0;
	left:0;
	z-index:300;
	margin-bottom:20px;
	}
header nav.main {
	top:100px;
	margin-bottom:0;
	}
nav.main ul {
	z-index:400;
	overflow:visible;
	line-height:1;
	}
nav.main ul li {
	float:left;
	display:inline;
	position:relative;
	}
nav.main ul li a {
	display:block;
	float:left;
	height:27px;
	padding:13px 10px 0;
	}
nav.main ul li a:hover,
nav.main ul li:hover a {
	}
nav.main ul li:hover a.active,
nav.main ul li a.active:hover {
	}


/* DROP DOWN 2ND LEVEL */
nav.main ul li ul {
	position: absolute;
	left: -999em;
	top: 40px;
	z-index: 2000;
	width: 200px;
	height:auto;
	padding:0;
	display:block;
	border-top:0;
	}
nav.main ul li ul li {
	float: none;
	width: auto;
	display:block;
	border:0 none!important;
	}
nav.main ul li ul li a {
	float: none;
	display: block;
	height:auto;
	width:auto;
	line-height:1.3;
	font-weight:normal;
	border:0 none!important;
	padding:10px;
	margin:0;
	}
nav.main ul li ul li a span { 
	display:block;
	background:none!important;
	}

nav.main ul li:hover ul ul,
nav.main ul li.hover ul ul {
	left: -999em;
	padding:0;
	border-top:0;
	}
nav.main ul li:hover ul ul li a.active,
nav.main ul li.hover ul ul li a.active {
	font-weight:bold;
	}
nav.main ul li.hover ul ul li a span {
	background:none!important;
	}

nav.main ul li li:hover ul,
nav.main ul li li.hover ul {
	left:200px;
	top:0;
	}

/* Hover effects */
nav.main ul li ul li a:hover {
	text-decoration:underline!important;
	}
/* Method of popping out the sub-section */
nav.main ul li:hover ul,
nav.main ul li.hover ul {
	left: -1px;
	}
	
}
		
@media (min-width:768px) and (max-width:1023px) {
	
nav.main ul li a i {
	display:none;
	}

}

@media (max-width:767px) {
	
nav.main ul {
	position:relative;
	clear:both;
	}
nav.main ul ul {
	display:none!important;
	}
nav.main ul li {
	display:block;
	}
nav.main ul li a {
	display:block;
	padding:10px 0;
	}
nav.main ul li.has_child a span {
	background-image:none;
	}
	
nav.main ul li a i {
	display:none;
	}

}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
CSS - Navigaiton - Main Nav

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS - Navigaiton - Main Nav

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS