css3好看的导航（css好看的导航栏）

CSS3好看的导航在现代网站设计中越来越受欢迎。下面我们看一看如何使用CSS3来创建一个漂亮的导航栏。

• 首页
• 产品
  • 产品1
  • 产品2
  • 产品3
• 关于我们
• 联系我们

上面的代码是使用HTML创建的一个基本的导航栏。下面我们来使用CSS3来美化它。

nav {
    font-family: Arial, sans-serif;
    width: 80%;
    margin: 0 auto;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
    position: relative;
}
nav ul li a {
    display: block;
    padding: 12px 18px;
    color: #333;
    text-decoration: none;
}
    nav ul li:hover >
a {
    color: #fff;
    background: #e74c3c;
}
nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0;
    display: none;
}
nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    padding: 12px 18px;
    color: #333;
    text-decoration: none;
    display: block;
}
nav ul ul li a:hover {
    color: #fff;
    background: #2c3e50;
}
    nav ul li:hover >
ul {
    display: inherit;
}
nav ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}
nav ul ul ul li a {
    padding: 12px 18px;
    color: #333;
    text-decoration: none;
    display: block;
}
nav ul ul ul li a:hover {
    color: #fff;
    background: #3498db;
}
    

上面的CSS代码为导航栏添加了背景色、悬停效果、子菜单弹出效果等。通过使用CSS3，我们可以轻松地创建出一个漂亮的导航栏，让网站更加美观和易用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！