/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* HTML5 display-role reset for older browsers */ * { box-sizing: border-box; } .menu { width: 100%; height:66px; background: #0C5CA5; display: flex; justify-content: center; z-index: 999; } .menu * { box-sizing: border-box; } .menu .ul-list { width:1200px; display: flex; } .menu .ul-list > li { flex: 1; position: relative; } .menu .ul-list > li:last-child { border-right: none; } .menu .ul-list > li > a { height: 66px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; } .menu .ul-list > li > a:hover , .menu .ul-list > li > a.on{ background: #046AC8; } .menu .ul-list > li > span { color: #fff; font-size: 14px; height: 66px; display: flex; align-items: center; justify-content: center; background:#0C5CA5; } .menu .ul-list > li:hover .ol-list { display: block; } .menu .ol-list { display: none; position: absolute; top: 66px; left: 0; z-index: 999; background:#f5f5f5; width: 100%; } .menu .ol-list > li > a { text-decoration: none; color: #333; height: 50px; display: flex; align-items: center; border-bottom: 1px solid #e6e6e6; justify-content: center; } .menu .ol-list > li > a:hover { color:white; background: #0C5CA5; } .menu .ul-list > li:hover{ background: #046AC8; }