#menu > ul > li > div > ul > li{
position: relative;	
}

#menu > ul > li > div > ul > li a{
padding-right: 14px; /* for arrow */	
}

#menu > ul > li > div > ul > li > div {
	display: none;
	position: absolute;
	z-index: 5;
	padding: 5px;
	-webkit-border-radius: 0px 5px 5px 0px;
	-moz-border-radius: 0px 5px 5px 0px;
	-khtml-border-radius: 0px 5px 5px 0px;
	border-radius: 0px 5px 5px 0px;
	border: 1px solid #000000; /* replace with your border style or delete */
	background: #333333; /* replace with your color or delete */
	background: url('../../image/menu.png'); /* replace with your image or delete */
	
	left: 100%;
	top: -6px;
}
#menu > ul > li > div > ul > li:hover > a {
	background: #000000; /* replace with your color or delete (for the parent category when hover) */
	-webkit-border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	-khtml-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
}

#menu > ul > li > div > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul > li > div > ul {
	display: table-cell;
}

#menu > ul > li > div > ul > li a.arrow{
background-image: url(../../image/menu3rdlevel/arrow.png); /* replace with custom arrow if you wish (6 x 8 default) */
background-repeat: no-repeat;
background-position: right center;
}

#menu > ul > li > div > ul > li:hover a.arrow{
background-image: url(../../image/menu3rdlevel/arrow_w.png); /* another arrow for hover (or delete) */
}