* { margin:0; padding:0; list-style-type:none; } .nav { width:90%; height:36px; line-height:36px; font-size:14px; color:#fff; margin:0 auto; position:relative; background:#643560; } .nav > .nav-main { width:100%; position:relative; } .nav > .nav-main span { position:absolute; top:16px; left:; margin-left:10px; width:7px; height:7px; background:url('../img/down-icon.png') no-repeat; */ } .nav > .nav-main >li { width:16.6%; text-align:center; float:left; position:relative; cursor:pointer; } .nav > .nav-main >li>.hidden-box { position:absolute; border:1px solid #643580; color:#000; top:100%; left:50%; display:none; cursor:pointer; } .nav > .nav-main >li>.hidden-box li:hover { background:#643580; color:#fff; } .nav > .nav-main >li>.hidden-loc-index { margin-left:-30px; } .nav > .nav-main >li>.hidden-loc-us { margin-left:-30px; } .nav > .nav-main >li>.hidden-loc-info { margin-left:-37px; } .nav > .nav-main >li>.box04 { margin-left:-30px; } .nav > .nav-main >li>.hidden-box>ul>li { text-align:center; } /*图标向上旋转*/ .hover-up { transition-duration:.5s; transform:rotate(180deg); -webkit-transform:rotate(180deg); } /*图标向下旋转*/ .hover-down { transition-duration:.5s; transform:rotate(0deg); -webkit-transform:rotate(0deg); }
自适应导航栏,PC端和移动端可共用的导航栏