.menubtn{ display: none; } nav.applePie{ /* font-size:1.6em;*//*16px*/ line-height: 1.2; display: block; position: relative; /* z-index:9999;*/ min-height: 32px; clear:both; margin-top:20px; margin-bottom:20px; } nav.applePie span{ display: none; } /* all lists */ nav.applePie ul, nav.applePie ul ul { padding: 0; margin: 0; list-style: none; line-height: 1; position: relative; } nav.applePie ul a { display: block; text-decoration: none; } /* all list items */ nav.applePie ul li { float:left; list-style-type: none; -webkit-transition: background-color 0.7s ease; -moz-transition: background-color 0.7s ease; -o-transition: background-color 0.7s ease; -ms-transition: background-color 0.7s ease; transition: background-color 0.7s ease; } nav.applePie ul li:last-child{ border: none; } /* second-level lists */ nav.applePie ul li ul { position: absolute; width: 25em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ z-index: 9999; margin-left: 0 ; } nav.applePie ul li ul li{ width: 25em; white-space: nowrap; display:block; } nav.applePie ul ul li, nav.applePie ul ul ul li, nav.applePie ul ul ul ul li{ border-right:none; } nav.applePie ul li a.sf-with-ul:after { content: '\25b6';/*Right Double Arrows*/ display: inline-block; *float:right;/*IE7 Fix*/ position:relative; top: 0em; right: -0.3em; } nav.applePie ul li.sfHover a.sf-with-ul:after{ -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } nav.applePie ul li.sfHover li a.sf-with-ul:after{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } nav.applePie ul li a.sf-with-ul:only-child:after{ content: '';/* if only child, delete arrow */ } nav.applePie ul li ul a{ padding:0.5em 1.5em; margin-top:-1px; /*to offset bottom border*/ } nav.applePie ul li ul li:last-child a{ border-bottom:none; } /* third-and-above-level lists */ nav.applePie ul li ul ul { margin: -2em 0 0 25em;/* negative margin calculated by li padding plus line height*/ } nav.applePie ul li:hover ul ul, nav.applePie ul li:hover ul ul ul, nav.applePie ul li.sfhover ul ul, nav.applePie ul li.sfhover ul ul ul { left: -999em; } nav.applePie ul li:hover ul, nav.applePie ul li li:hover ul, nav.applePie ul li li li:hover ul, nav.applePie ul li.sfhover ul, nav.applePie ul li li.sfhover ul, nav.applePie ul li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } /*UNIVERSAL PADDING*/ nav.applePie ul a, nav.applePie ul li a, nav.applePie ul li ul a { padding:0.5em 1.5em; } /*---------------------------------- IE7 -----------------------------------*/ .ie7 nav.applePie ul li a.sf-with-ul{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NjUzQjYyMzVGOEMxMUUzOTFFRTg0NDFCMzIxQjA4QiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NjUzQjYyNDVGOEMxMUUzOTFFRTg0NDFCMzIxQjA4QiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY2NTNCNjIxNUY4QzExRTM5MUVFODQ0MUIzMjFCMDhCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY2NTNCNjIyNUY4QzExRTM5MUVFODQ0MUIzMjFCMDhCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BDQ6YwAAAHdJREFUeNpiZBLWYCAGMEFpZiCuAGJOHHy4Qm8gbgfijVBJdD4DMyOXCIi+CcT/gTgZiI2BuAWI/yDxVzMiuRGk8wYQywGxPxDvRuYzISnaAhUshipC5m+CKbQHYicgrgHiPix8BmSrDYD4AlKIoPAZiQ1HgAADAOmdFtZlRP7CAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position:right center; } /*---------------------------------- IE6 -----------------------------------*/ .ie6 nav.applePie ul li a.sf-with-ul{ background-image: url('../images/arrow.png'); background-repeat: no-repeat; background-position:right center; } /*---------------------------------- COLORS -----------------------------------*/ nav.applePie{ /*background:#fff;*/ } nav.applePie ul a { color:#333; } /*Top nav.applePie borders*/ nav.applePie ul li { border-right:1px solid #ccc; } nav.applePie ul li:hover{ color: #666; background: #e5e5e5; } nav.applePie ul li ul a{ border-bottom:1px solid #e5e5e5; } nav.applePie ul li ul { background: #ccc; } /*---------------------------------- MEDIA QUERY -----------------------------------*/ @media screen and (max-width:800px){ .menubtn{ display: block; margin: 5px 0 10px; float:right; text-indent:-9999px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; width:40px; height:40px; } .menubtn:hover{ cursor: pointer; } nav.applePie span{ display: block; } nav.applePie span{ position: relative; float: right; padding: 10px; } nav.applePie span:hover{ cursor: pointer; } nav.applePie ul, nav.applePie ul > ul{ display: none; float:none; width:100%; } nav.applePie ul li { border-right:none; } nav.applePie ul li a.sf-with-ul:after { content:''; } nav.applePie ul li ul, nav.applePie ul li ul li{ width: 100%; } nav.applePie ul li ul a{ border-bottom:none; } nav.applePie ul ul, nav.applePie ul li{ width:100%; } nav.applePie ul li a{ padding:0.5em 1em 0.5em 1em; float: left; } nav.applePie ul li ul a{ padding: 0.5em 1em 0.5em 2em; } nav.applePie ul ul li ul a{ padding: 0.5em 1em 0.5em 3em; } nav.applePie ul ul ul li ul a{ padding: 0.5em 1em 0.5em 4em; } nav.applePie ul li ul, nav.applePie ul li ul ul, nav.applePie ul li:hover ul ul, nav.applePie ul li:hover ul ul ul, nav.applePie ul li.sfhover ul ul, nav.applePie ul li.sfhover ul ul ul, nav.applePie ul li:hover ul, nav.applePie ul li li:hover ul, nav.applePie ul li li li:hover ul, nav.applePie ul li.sfhover ul, nav.applePie ul li li.sfhover ul, nav.applePie ul li li li.sfhover ul { position: relative; display: none; margin: 0 0 0 0; left: 0em; /* using left instead of display because display: none isn't read by screen readers */ } /*---------------------------------- MOBILE COLORS -----------------------------------*/ nav.applePie{ background: none; } .menubtn{ background: #333 url('../images/menuicon.png') no-repeat right top; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -khtml-opacity: 0.6; opacity: 0.6; } .menubtn:hover, .menuOpen{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -khtml-opacity: 1; opacity: 1; } /*Plus icon*/ nav.applePie span{ background: #00b4ff; color:#fff; } nav.applePie span:hover{ background: #049ad6; } /*Top nav.applePie background*/ nav.applePie ul ul, nav.applePie ul li{ background: #eeeeee; } /*Sub-nav.applePie background*/ nav.applePie ul li ul li{ background: #ccc; } /*Sub-nav.applePie borders*/ nav.applePie ul li ul li{ border-bottom:1px solid #e5e5e5; } /*sub, sub-nav.applePie background*/ nav.applePie ul ul ul li{ background: #ccc; } /*First nav.applePie Item when open*/ ul li.menuOpen, ul li.menuOpen:hover{ background:#47a3da; } ul li.menuOpen >span{ background: #049ad6; } /*Sub-nav.applePie Item when open*/ ul ul li.menuOpen, ul ul li.menuOpen:hover{ background:#a9e4fc; } /*Sub, Sub-nav.applePie Item when open*/ ul ul ul li.menuOpen, ul ul ul li.menuOpen:hover{ background:#cdebf7; } }