/* 导航主体 - 现代化美化 */ .nav { width: 100%; height: 62px; background: #0078D4; margin: 0; padding: 0; position: relative; z-index: 99; box-shadow: 0 3px 12px rgba(0, 120, 212, 0.15); border-radius: 0 0 10px 10px; } /* 列表 */ .nav ul { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; } /* 菜单项 */ .nav ul li { flex: 1; height: 100%; list-style: none; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease; } /* 链接样式优化 */ .nav ul li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 16px; font-weight: 500; color: #fff; text-decoration: none; letter-spacing: 0.5px; transition: all 0.3s ease; padding: 0 8px; } /* 分隔线（更柔和） */ .nav ul li:not(:last-child) a { border-right: 1px solid rgba(255, 255, 255, 0.12); } /* 选中 + hover 效果 */ .nav ul li.on, .nav ul li:hover { background: #0085D7; transform: translateY(-1px); } .nav ul li a:hover { color: #ffffff; } /* 下拉菜单 - 丝滑动画 + 圆角 */ .nav ul li .nav_la { width: 100%; position: absolute; top: 62px; left: 0; background: #ffffff; border-radius: 10px; display: none; z-index: 999; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } /* 显示下拉时的动画 */ .nav ul li:hover .nav_la { display: block; opacity: 1; transform: translateY(0); } /* 下拉项 - 白底蓝字更清爽 */ .nav ul li .nav_la a { height: 50px; font-size: 15px; color: #333; border-right: none; border-bottom: 1px solid #f0f0f0; transition: all 0.25s ease; } /* 下拉 hover 效果 */ .nav ul li .nav_la a:hover { background: #f5f9ff; color: #0078D4; padding-left: 12px; } /* 最后一个下拉项无边框 */ .nav ul li .nav_la a:last-child { border-bottom: none; }