/* style the outer div to give it width */ #Divmenu { height:39px; width:1091px!important; margin:0 auto; } #Divmenu ul { margin:0; padding:0; list-style:none; float:left; } #Divmenu ul li { float:left; margin:0; padding:0; z-index:1; } #Divmenu02 { width:132px; background:url(../image/menu-macdvd.jpg) no-repeat; float:left; height:39px; } #Divmenu03 { width:132px; background:url(../image/menu-iphone.jpg) no-repeat; float:left; height:39px; cursor:pointer;} #Divmenu04 { width:132px; background:url(../image/menu-ipad.jpg) no-repeat; float:left; height:39px; cursor:pointer;} #Divmenu05 { width:132px; background:url(../image/menu-ipod.jpg) no-repeat ; float:left; height:39px; cursor:pointer;} #Divmenu06 { width:132px; background:url(../image/menu-itunes.jpg) no-repeat; float:left; height:39px; cursor:pointer;} #Divmenu07 { width:132px; background:url(../image/menu-promotion.jpg) no-repeat; float:left; height:39px;} #Divmenu08 { width:132px; background:url(../image/menu-support.jpg); float:left; height:39px;} #Divmenu09 { width:132px; background:url(../image/menu-company.jpg); float:left; height:39px;} /* remove all the bullets, borders and padding from the default list styling */ #Divmenu02 ul, #Divmenu03 ul, #Divmenu04 ul, #Divmenu05 ul, #Divmenu06 ul, #Divmenu07 ul, #Divmenu08 ul, #Divmenu09 ul {padding:0 ;margin:0; list-style-type:none; position:absolute; z-index:1; } /* style the sub-level lists */ #Divmenu02 ul ul, #Divmenu03 ul ul, #Divmenu04 ul ul, #Divmenu05 ul ul, #Divmenu06 ul ul, #Divmenu07 ul ul, #Divmenu09 ul ul, #Divmenu08 ul ul { margin:5px 0 0 0; padding:0; } /* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */ #Divmenu02 ul li, #Divmenu03 ul li, #Divmenu04 ul li, #Divmenu05 ul li, #Divmenu06 ul li, #Divmenu07 ul li, #Divmenu08 ul li, #Divmenu09 ul li {float:left; display:block;} /* style the sub level list items */ #Divmenu02 ul ul li, #Divmenu03 ul ul li, #Divmenu04 ul ul li, #Divmenu05 ul ul li, #Divmenu06 ul ul li, #Divmenu07 ul ul li, #Divmenu08 ul ul li, #Divmenu09 ul ul li {display:block; width:180px; height:auto; } /* style the links for the top level */ #Divmenu02 a, #Divmenu02 a:visited, #Divmenu03 a, #Divmenu03 a:visited, #Divmenu04 a, #Divmenu04 a:visited , #Divmenu05 a, #Divmenu05 a:visited, #Divmenu06 a, #Divmenu06 a:visited, #Divmenu07 a, #Divmenu07 a:visited , #Divmenu08 a, #Divmenu08 a:visited, #Divmenu09 a, #Divmenu09 a:visited {display:block; float:left; text-decoration:none; color:#6CB5E4; background:#000; } /* style the sub level links */ #Divmenu02 ul ul a, #Divmenu02 ul ul a:visited, #Divmenu03 ul ul a, #Divmenu03 ul ul a:visited, #Divmenu04 ul ul a, #Divmenu04 ul ul a:visited , #Divmenu05 ul ul a, #Divmenu05 ul ul a:visited, #Divmenu06 ul ul a, #Divmenu06 ul ul a:visited, #Divmenu07 ul ul a, #Divmenu07 ul ul a:visited , #Divmenu08 ul ul a, #Divmenu08 ul ul a:visited, #Divmenu09 ul ul a, #Divmenu09 ul ul a:visited {display:block; background:#5b8686 url(../image/menu-bg.jpg); /*padding:9px 0 8px 10px;*/ padding:9px 0 8px 8px; color:#6CB5E4; width:152px; border-right:#666 1px solid; /*text-align:center;*/ } * html #Divmenu02 ul ul a, * html #Divmenu02 ul ul a:visited { } /* style the table so that it takes no part in the layout - required for IE to work */ #Divmenu02 table { border-collapse:collapse; padding:0; margin:-2px; width:0; height:0; font-size:1em; z-index:1;} /* first */ * html #Divmenu07 a:hover {color:#000; position:relative; z-index:100;} * html #Divmenu08 a:hover {color:#000; position:relative; z-index:100;} * html #Divmenu09 a:hover {color:#000; position:relative; z-index:100;} * html #Divmenu02 a:hover {color:#000; position:relative; z-index:100;} * html #Divmenu03 a:hover {color:#000; position:relative; z-index:100;} * html #Divmenu04 a:hover {color:#000; position:relative; z-index:100;} * html #Divmenu05 a:hover {color:#000; position:relative; z-index:100;} * html #Divmenu06 a:hover {color:#000; position:relative; z-index:100;} #Divmenu02 li:hover, #Divmenu03 li:hover, #Divmenu04 li:hover, #Divmenu05 li:hover, #Divmenu06 li:hover, #Divmenu07 li:hover, #Divmenu08 li:hover, #Divmenu09 li:hover {position:relative;} #Divmenu02 :hover > a, #Divmenu03 :hover > a, #Divmenu04 :hover > a, #Divmenu05 :hover > a, #Divmenu06 :hover > a, #Divmenu07 :hover > a, #Divmenu08 :hover > a, #Divmenu09 :hover > a {color:#000; } /* second */ * html #Divmenu02 ul ul a:hover, #Divmenu03 ul ul a:hover, #Divmenu04 ul ul a:hover , #Divmenu05 ul ul a:hover, #Divmenu06 ul ul a:hover, #Divmenu07 ul ul a:hover , #Divmenu08 ul ul a:hover, #Divmenu09 ul ul a:hover {color:#000; background:#7aa; position:relative; z-index:110; } #Divmenu02 ul ul li:hover, #Divmenu03 ul ul li:hover, #Divmenu04 ul ul li:hover, #Divmenu05 ul ul li:hover, #Divmenu06 ul ul li:hover, #Divmenu07 ul ul li:hover, #Divmenu08 ul ul li:hover, #Divmenu09 ul ul li:hover {position:relative; } #Divmenu02 ul ul :hover > a, #Divmenu03 ul ul :hover > a, #Divmenu04 ul ul :hover > a, #Divmenu05 ul ul :hover > a, #Divmenu06 ul ul :hover > a, #Divmenu07 ul ul :hover > a, #Divmenu08 ul ul :hover > a, #Divmenu09 ul ul :hover > a {color:#FFF;background:url(../image/menu-bg2.jpg); } /* hide the sub levels and give them a positon absolute so that they take up no room */ #Divmenu02 ul ul, #Divmenu03 ul ul, #Divmenu04 ul ul, #Divmenu05 ul ul, #Divmenu06 ul ul, #Divmenu07 ul ul, #Divmenu08 ul ul, #Divmenu09 ul ul {visibility:hidden;position:absolute; height:0; top:3em; left:0; } /* make the second level visible when hover on first level list OR link */ #Divmenu02 ul :hover ul, #Divmenu03 ul :hover ul, #Divmenu04 ul :hover ul, #Divmenu05 ul :hover ul, #Divmenu06 ul :hover ul, #Divmenu07 ul :hover ul, #Divmenu08 ul :hover ul, #Divmenu09 ul :hover ul {visibility:visible; height:auto; padding:0 3em 3em 3em; background:transparent url(images/trans.gif); left:-3em; } /* keep the third level hidden when you hover on first level list OR link */ #Divmenu02 ul :hover ul ul, #Divmenu03 ul :hover ul ul, #Divmenu04 ul :hover ul ul, #Divmenu05 ul :hover ul ul, #Divmenu06 ul :hover ul ul, #Divmenu07 ul :hover ul ul, #Divmenu08 ul :hover ul ul, #Divmenu09 ul :hover ul ul {visibility:hidden; } /* keep the fourth level hidden when you hover on second level list OR link */ #Divmenu02 ul :hover ul :hover ul ul, #Divmenu03 ul :hover ul :hover ul ul, #Divmenu04 ul :hover ul :hover ul ul, #Divmenu05 ul :hover ul :hover ul ul, #Divmenu06 ul :hover ul :hover ul ul, #Divmenu07 ul :hover ul :hover ul ul, #Divmenu08 ul :hover ul :hover ul ul, #Divmenu09 ul :hover ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ #Divmenu02 ul :hover ul :hover ul, #Divmenu03 ul :hover ul :hover ul, #Divmenu04 ul :hover ul :hover ul, #Divmenu05 ul :hover ul :hover ul, #Divmenu06 ul :hover ul :hover ul, #Divmenu07 ul :hover ul :hover ul, #Divmenu08 ul :hover ul :hover ul, #Divmenu09 ul :hover ul :hover ul {visibility:visible; left:9em;} /* make the fourth level visible when you hover over third level list OR link */ #Divmenu02 ul :hover ul :hover ul :hover ul, #Divmenu03 ul :hover ul :hover ul :hover ul, #Divmenu04 ul :hover ul :hover ul :hover ul, #Divmenu05 ul :hover ul :hover ul :hover ul, #Divmenu06 ul :hover ul :hover ul :hover ul, #Divmenu07 ul :hover ul :hover ul :hover ul, #Divmenu08 ul :hover ul :hover ul :hover ul, #Divmenu09 ul :hover ul :hover ul :hover ul {visibility:visible;} /*-------------------------------------*/ #hotnews { width:982px; margin:15px auto 0; } #hotnews_caption { width:982px; overflow:hidden; border-bottom:3px solid #C2130E; } #hotnews_caption ul { float:left; margin:0; padding:0; list-style:none; width:491px; height:75px; background:url(../image/6.jpg) no-repeat; } #hotnews_caption ul li { float:left; border-left:1px solid #FFF; width:139px; line-height:25px; text-align:center; cursor:pointer; margin:0;} #hotnews_caption .normal { background:#CCC;} #hotnews_caption .current{ background:#C2130E; color:#FFF; } #hotnews_content { margin:0;} #hotnews_content P { margin:0; padding:20px 10px 0; line-height:18px;} #hotnews_content .normal { display:none; } #hotnews_content .current { display:block; } #hotnews_content ul { padding:8px 0 0 20px; list-style:none; margin:0; } #hotnews_content ul li { margin:0; padding:2px 10px 2px 15px; line-height:18px; background:url(../pics/link_ico_default.gif) no-repeat left center; } .to_top{ position:fixed; right:20px; bottom:20px; cursor:pointer;}