.Menu { padding-top:10px; } .Menu li { float: left; width:auto; text-align:center; position: relative; z-index:999; } .Menu > li { float:left; width:120px; } .Menu li a { width:100%; text-align:center; display:inline-block; font-size:16px; line-height:76px; font-family:"Microsoft YaHei"; border-bottom:4px; color:#555; } .Menu > li.active > a,.Menu > li:hover > a { border-bottom:4px solid #ee2e35; } .Menu li a:hover { background:#fff; color:#d50010; } .Menu li:hover ul { display: block; } .Menu li:hover ul ul { display: none; } .Menu ul { display: none; width:120px; position: absolute; top: 50px; left: 0px; z-index:888888; background:#d50010; -webkit-box-shadow: 3px 3px 3px; -moz-box-shadow: 3px 3px 3px; box-shadow: 3px 3px 3px; } .Menu ul li { float: none; border:0; height:44px; width:100%; text-align:center; white-space:nowrap; background:#1b70b5;} .Menu ul li a { line-height:46px; color:#fff; padding:0 8px; } .Menu ul li:hover { background:#ee2e35; color:#fff; } .Menu ul li:hover a { background:#ee2e35; color:#fff; } .Menu ul li:hover ul { display: block; } .Menu ul li:hover ul ul { display: none; } @media screen and ( min-width:768px ) and ( max-width: 999px) { } @media screen and ( max-width:767px ) { .Menu { background:#d50010; left:-40px; } .Menu li { width:90px; } .Menu li a { line-height:32px; font-size:14px; padding:0px; color:#fff; } .Menu > li.active > a,.Menu > li:hover > a { border-bottom:0px; } .Menu > li:nth-child(n+2) > a { background:transparent; } .Menu > li > a:hover { background:#fff; color:#d50010; } .Menu ul { left:-230px; top:0px; } .Menu ul li { height:32px; background:#d50010; } .Menu ul li a { line-height:32px; } .Menu ul li:hover { background:#fff; color:#d50010; } .Menu ul li:hover a { background:#fff; color:#d50010 } }