.navigation {
            width:100%; background:url(../images/menu-bg.png) repeat-x; height:36px;
        }
        .navigation ul{
        /* positioning */
        	position:relative;
            z-index:1000;
        /* remove the dots next to list items: */
            list-style:none; 
        /* get rid of any default or inherited margins and padding: */
            margin:0; 
            padding:0; 
            
        /* styling: */
            text-shadow: #444444 0px 1px 0px; color:#fff; font-weight:bold; font-size:12px; font-family:Arial, Helvetica, sans-serif;
        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .navigation > ul > li {
        /* positioning */ 
            position: relative;
            float: left;
        /* styling: */
            margin-right: 10px;
        }
        .navigation > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
           /*  background-color: #2c2c2c;  grey */
            padding:8px 7px;
            text-decoration:none; color:#fff;
			
           
            
        }
        .navigation > ul > li > a:hover{
        /* styling: */
            background-color:#d9473d; /* grey */
            color:#eeeeee; border-bottom:solid 1px #760b02; /* light grey */
			-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;
        }
		.navigation ul ul{
            
           /*  background-color:#e6056f; remove. this is for illustration purposes only */
            width:340px; /* you need a width to accommodate tertiary menus */
            
            position:absolute;
            z-index:100;
            
            height: 0;
            overflow: hidden;
			-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;
                
        }
        

        /* don't display tertiary box yet */
        .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .navigation ul ul ul{
            left:170px;
            width:170px;
        }
        
        .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
        .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
            height:220px; /* need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
        
        .navigation ul ul li{
            background-color:#d14338; 
            width:125px;
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
        
        .navigation ul ul li:hover {
            background-color:#931107; 
        }
        
        .navigation ul ul li a {
            display:block;
            text-decoration:none;
            margin:0 12px;
            padding:5px 0;
            color:#fff; /* grey */
			margin-top:5px;
        }
        .navigation ul ul li a:hover, .navigation ul ul li:hover > a {
            color:#ffffff; /* white */
        }
		.navigation ul ul ul li a{
            border:0 !important;
        }
        .navigation ul ul ul li + li a{
            border-top:1px dotted #999 !important;
        }
        .navigation ul ul li + li a{
            border-top:1px dotted #999;
        }
        .navigation ul ul li:hover + li a{
            border-top:1px solid #eaeaea;
        }
        .navigation ul ul ul li:hover + li a{
            border: 0 !important;
        }
        .navigation ul ul ul li:hover + li{
            border-top:1px solid #999 !important;
        }