Megamenu Rollover Image

Megamenu with rollover image

HTML

<div id="menu">

	<ul>
    	<li class="bottonemenu">
        JUNIOR
        	<ul class="megamenu">
                <span class="categoria">VACANZE STUDIO DESTINAZIONI</span>
            	<ul>
                    <li>Inglese</li>
                    <li>Irlanda</li>
                    <li>Inghilterra</li>
                    <li>USA</li>
                    <li>Scozia</li>
                    <li>Malta</li>

            	</ul>
                
                <ul>
                    <li>Tedesco</li>
                    <li>Germania</li>
            	</ul>
                    
                <ul>
                     <li>Francese</li>
                    <li>Francia</li>
            	</ul>
                
                <ul>
                     <li>Spagnolo</li>
                    <li>Spagna</li>
            	</ul>
                
                <ul>
                     <li>Altro</li>
                    <li>Italiano</li>
                    <li>Cinese</li>
            	</ul>
                
                 <hr />
                
                <ul>
                     <li>Cosa devi sapere (FAQ)</li>
                    <li>Corsi</li>
                    <li>Alloggio</li>
            	</ul>
                
                <ul>
                     <li>&nbsp;</li>
                    <li>Tempo libero</li>
                    <li>Informazioni pratiche</li>
            	</ul>
                
                
                <ul>
                     <li>Contatti</li>
                    <li>[email protected]</li>
                    <li>tel. 02 55016516</li>
            	</ul>
                
                <ul>
                    
                </ul>
                
                <ul>
                     <li>ISCRIVITI ONLINE</li>
            	</ul>
                
                
            </ul>
            
           
  
        </li>
        
        
        
        
        <li class="bottonemenu"> <a>UNIVERSITARI 
        
  ...

CSS

#menu{
	font-family: sans-serif;
		height:45px;	
    float:right;
display:table;
	width:500px;
}


#menu ul{
	  display: table-row;
      list-style-type: none;
	  width:960px;
	  max-width:960px;
}

#menu li{
	text-align:left;
	display:table-cell;
	line-height:45px;
    margin-left:20px;
	font-size:0.9em;
	color:#AAA;
	font-weight:bold;
	cursor:pointer;
		
}


#menu li:hover{
	
	background: #ffffff; /* Old browsers */
color:#e20613;
}

#menu li:last-child{
	border-right:none;	
}


.megamenu{
	background-color:#383838;
	margin:0;
	padding:0;		
    left:0;
    
-webkit-box-shadow: 0 8px 6px -6px #999;
       -moz-box-shadow: 0 8px 6px -6px #999;
            box-shadow: 0 8px 6px -6px #999;
			
			border-left:1px solid #CCC;
			border-right:1px solid #CCC;
}


#menu ul ul {
	position:absolute;
	z-index:99999;
	float:left;
	display:none;
	vertical-align:top;
}



#menu ul ul ul {
	position:relative;
	float:left;
	margin:0px;
	padding:0px;
	max-width:20%;
	margin-top:10px;
	margin-bottom:30px;
}


#menu ul ul ul:last-child {
	border-right:none !important;
}


#menu ul ul li{
	clear:both;
	margin-top:10px;
	font-size:0.9em;
	color:#BBB;
	border:none;
	float:left;
	width:100% !important;
	font-weight:lighter;
	cursor:pointer;
	line-height:20px;
}

#menu ul ul ul li:hover{
	color:#EEE;
	background:none !important;
	
}

#menu ul ul ul li:first-child {
    font-weight:bold;
    color:#388ad3;
    font-size:15px;
}


#menu hr{
    float:left;
    width:100%;
    height:1px;
    background-color:#000;
    border:none;
}


#menu ul li:hover ul {
	display:block;

}


#menu ul ul a{
	font-size:inherit;
	text-decoration:inherit;
	font-weight:inherit;
	color:inherit;
}

.categoria{
    display:inline-block;
    width:100%;
    margin-left:20px;
    font-weight:normal !important;
    color:#EEE;
    
}