.appleNav {
    margin:0px;
    list-style:none;
    float:left;
 /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d1d1d1), color-stop(1, #f8f8f8));
    background-image: -moz-linear-gradient(center bottom, #d1d1d1 0%, #f8f8f8 100%);
    background-color:#f6f6f6; /* Fallback */


    /* Lucinda Grande is the font used on the website from Apple. */
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing:-0.5px;
    font-size:12px;
    

    /* We want to add the shadow to the complete navigation menu. In order to do that, we'll need to set
    the correct width and height, and also the correct borders, in order to create the perfect drop shadow */
    width:1000px;
    height:36px;
    z-index: 99;
}

.appleNav li {
    display:block;
    float:left;
    border-right:1px solid #aeaeae;
    border-left:1px solid #f8f8f8;
    padding: 0 28px 0 28px;
    height:auto; /*prev measurement 34px*/

   /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d1d1d1), color-stop(1, #f8f8f8));
    background-image: -moz-linear-gradient(center bottom, #d1d1d1 0%, #f8f8f8 100%);
    background-color:#f6f6f6; /* Fallback */
    position:relative;
}

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
.appleNav li:hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d8d8d8), color-stop(0.5, #e0e0e0), color-stop(0.51, #d8d8d8), color-stop(1, #e0e0e0));
    background-image: -moz-linear-gradient(center bottom, #e0e0e0 0%, #d8d8d8 50%, #e0e0e0 51%, #d8d8d8 100% );
    background-color:#e0e0e0; /* Fallback */
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 2px 2px #cacaca;
    -webkit-box-shadow: inset 0 0 2px 2px #cacaca;
    box-shadow: inset 0 0 2px 2px #cacaca;
}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
.appleNav li:not(:last-child):active {
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d8d8d8), color-stop(0.5, #e0e0e0), color-stop(0.51, #d8d8d8), color-stop(1, #e0e0e0));
    background-image: -moz-linear-gradient(center bottom, #e0e0e0 0%, #d8d8d8 50%, #e0e0e0 51%, #d8d8d8 100% );
    background-color:#e0e0e0; /* Fallback */
        /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 2px 2px #cacaca;
    -webkit-box-shadow: inset 0 0 2px 2px #cacaca;
    box-shadow: inset 0 0 2px 2px #cacaca;
}

.appleNav li a {
    margin:0;
    padding:0;
    color:#464646;
    text-decoration:none;
    text-align:center;
    display:block;
    font-weight:bold; 
    line-height:34px;
    outline:none;
}

 
/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left.
We also remove the borders, since they don't need them. */
.appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;    
    border-left:none;
}
.appleNav li:last-child {
    border-right:none !important;
}

/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
.appleNav li:first-child a img {
   vertical-align:middle;
   margin-top:-2px;
}


/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}

.appleNav {
     -webkit-animation: showMenu 1s;
     position:relative;
}
/**
    *LEVEL TWO
*/
.appleNav li ul{
    display:none;
    position:absolute;
    top: 100%;
    left: 0; 
}
.appleNav li ul a{
}
.appleNav ul li:hover ul{
    display:inline-block;
}
.appleNav ul ul,
.appleNav ul li:hover ul ul,
.appleNav ul ul li:hover ul ul{
    display:none;
}
.appleNav ul li:hover ul,
.appleNav ul ul li:hover ul,
.appleNav ul ul ul li:hover ul{
    display:block;
}
.appleNav ul li:hover ul li a,
.appleNav ul ul li:hover ul li a,
.appleNav ul ul ul li:hover ul li a{
    width:125px;
    margin:-1px 0 0 -11px;
    padding: 10px!important;
    line-height: 15px !important;
    text-align:left !important;
}
.appleNav ul ul li:hover ul{
    margin-top: -33px;
}
.appleNav ul ul li:hover ul li {
    margin-left:195px;
}
.appleNav ul ul ul li:hover ul li {
    padding:0 10px 0 24px;
}