www.gusucode.com > 红色简易二级下拉导航菜单源码程序 > 红色简易二级下拉导航菜单/hongsejianyi/css/main.css
/** *在Position属性值为absolute的同时, *如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样) *的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位, *这对精确定位是很有帮助的。 */ *{ margin: 0; padding: 0; } body{background:#eee;} /*nav导航盒子*/ nav{ width: 800px; height: 40px; line-height: 40px; /*导航位置*/ margin: 100px auto; text-align: center; font-size: 12px; position: relative; background: #ff5640; } /*nav-main*/ .nav-main{ width: 100%; height: 100%; list-style-type: none; } .nav-main span{ display: inline-block; margin-left: 18px; width: 7px; height: 7px; background: url('../img/down-icon.png') no-repeat; } /*图标向上旋转*/ .hover-up{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -webkit-transition:all 0.2s ease-in-out; } /*图标向下旋转*/ .hover-down{ transform: rotate(0deg); -webkit-transform: rotate(0deg); -webkit-transition:all 0.2s ease-in-out; } /*导航条设置*/ .nav-main>li{ width: 120px; height: 100%; display: block; float: left; background: #ff5640; color: #fff; margin-right: 1px; cursor: pointer; } .nav-main>li:hover{ background: #ff3e3e; } /*隐藏盒子设置*/ .hidden-box{ width: 118px; border: 1px solid #ff3e3e; border-top: 0; position: absolute; display: none; top: 40px; } .hidden-box>ul{ list-style-type: none; color: #ff3e3e; cursor: pointer; } .hidden-box li{background:#fff;} .hidden-box li:hover{ background: #ff3e3e; color: #fff; } /*隐藏盒子位置设置*/ .hidden-loc-index{ left: 121px; } .hidden-loc-us{ left: 242px; } .hidden-loc-info{ left: 363px; } /*download by www.sucaijiayuan.com*/