导航效果是网页设计中最为重要的元素之一，通过CSS可以实现很多炫酷的导航效果。下面是一些CSS导航效果代码的大全，你可以根据自己的需求选择适合自己的风格。

1.普通导航菜单

ul {list-style: none;margin: 0;padding: 0;}li {float: left;margin-right: 20px;}a {display: block;padding: 10px;background-color: #333;color: #fff;text-decoration: none;}a:hover {background-color: #666;}

2.下划线式导航菜单

ul {list-style: none;margin: 0;padding: 0;}li {display: inline-block;margin-right: 20px;position: relative;}li a {display: block;padding: 10px;background-color: #333;color: #fff;text-decoration: none;}li a:hover {background-color: #666;}li:before {content: "";position: absolute;bottom: -3px;left: 0;width: 100%;height: 3px;background-color: #ff6a00;transform: scaleX(0);transition: transform 0.2s ease;}li:hover:before {transform: scaleX(1);}

3.背景颜色渐变式导航菜单

ul {list-style: none;margin: 0;padding: 0;}li {float: left;margin-right: 20px;}a {display: block;padding: 10px;background: #333;background-image: linear-gradient(to bottom, #333, #666);color: #fff;text-decoration: none;transition: background-image 0.2s ease;}a:hover {background-image: linear-gradient(to bottom, #666, #999);}

4.折线式导航菜单

ul {list-style: none;margin: 0;padding: 0;}li {display: inline-block;margin-right: 20px;position: relative;}li a {display: block;padding: 10px;background-color: #333;color: #fff;text-decoration: none;position: relative;z-index: 1;}li a:before {content: "";position: absolute;bottom: -10px;left: 50%;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #333;transform: translateX(-50%);}li a:hover:before {border-top-color: #666;}

5.旋转式导航菜单

ul {list-style: none;margin: 0;padding: 0;}li {display: inline-block;margin-right: 20px;position: relative;transform-origin: center;transition: transform 0.2s ease;}li a {display: block;padding: 10px;background-color: #333;color: #fff;text-decoration: none;}li:hover {transform: rotateY(360deg);}

这些CSS导航效果代码可以让你的网站更加炫酷，让用户的体验更佳。当然，你也可以根据自己的喜好和网站风格自由发挥，实现更多的导航效果。