Menu css hiệu ứng mới

#### HTML

#### CSS
.home-menu{
    position: relative;
    background: url(../images/menu-bg.png) repeat-x;
    height: 42px;
    width: 1200px;
}
.home-menu > ul{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 42px;
    display: table;
}
.home-menu > ul > li{
    padding: 0 20px;
    line-height: 40px;
    display: table-cell;
    text-align: center;
    background: url(../images/line.png) no-repeat left center;
    position: relative;
}
.home-menu > ul > li:first-child{
    background: none;
}
.home-menu > ul > li:hover,
.home-menu > ul > li.active{
    /*background:#e87232;*/
    background: #e87232 url(../images/line.png) no-repeat left center;
}
.home-menu > ul > li.homepage:hover,
.home-menu > ul > li.active.homepage{
    background:#e87232;
}
.home-menu > ul > li > a{
    text-transform: uppercase;
    font-size: 14px;
    color:#fff;
}
.home-menu > ul > li > a:hover,
.home-menu > ul > li.active > a{
    text-decoration: none;
}
.home-menu > ul > li > a >i{
    font-size: 20px;
}
.home-menu > ul > li > ul > li > a{
font-size: 13px;
    color:#fff;
    text-transform: none !important;
}
.menu, .menu ul {
list-style-type:none; 
padding:0;
margin:0; 
font: 11px Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: left;
}

/* Set up the top level list items and float left to place inline */
.menu li.top {
/*float:left;
display: block;*/
position:relative;
font-size: 14px;
text-transform: uppercase;
}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
/*.menu table {
border-collapse:collapse;
width:0;
height:0;
position:absolute; 
top:0; 
left:0;
}*/
/* Default top link link styling */
/*.menu li.top a.top_link {
display:block;
float:left;
height: 42px;
text-decoration: none;
color: #FFF;
}
.menu li.top a.top_link:hover {
display:block;
float:left;
height: 42px;
text-decoration: none;
color: #fff;
}
.menu li.top a span {
position:absolute;
left:-9999px; 
top:0; 
z-index:0; 
font-size:10px;
}*/ 


/* move the link text off screen */

/* for IE6 */
.menu li:hover { 
position:relative;
z-index:200;
} /* for IE7 */

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {
position:absolute;
left:-9999px;
top:-9999px; 
width:0; 
height:0;
}

/* set up the first drop down sub level */
.menu :hover ul.sub {
left:0;
top:42px;
white-space:nowrap;
height:auto;
width: 250px;
}
.menu :hover ul.sub li {
display: block;
position:relative;
float:left;
background-color: #1a61a2;
line-height:40px;
font-size:13px;
font-family: Arial, Helvetica, sans-serif;
width: 250px;
text-indent: 8px;
}

.menu :hover ul.sub li:last-child {
border-bottom: 0;
}

.menu :hover ul.sub li a {
text-decoration: none;
background-color: #1a61a2;
display:block;
color:#fff;
width: 250px;
font-size: 12px;
}
.menu :hover ul.sub li a:hover {
text-decoration: none;
background-color: #007DC3;
display:block;
color: #fff;
width: 250px;
}

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul {
left:250px;
top: 0px;
white-space:nowrap;
width: 250px;
z-index:200;
z-index:400;
height:auto;

}