用h5c3写出带css样式的三级导航
时间: 2023-06-16 19:03:41 浏览: 52
下面是一个用HTML5和CSS3实现的带样式的三级导航:
```html
<!DOCTYPE html>
<html>
<head>
<title>三级导航</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
}
nav li {
display: inline-block;
position: relative;
line-height: 50px;
padding: 0 10px;
}
nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid #fff;
}
nav ul ul {
display: none;
position: absolute;
top: 50px;
left: 0;
background-color: #333;
padding: 0;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul a {
display: block;
padding: 10px;
border-bottom: 1px solid #fff;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #333;
padding: 0;
}
nav ul ul ul li {
display: block;
width: 100%;
}
nav ul ul ul a {
display: block;
padding: 10px;
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">History</a>
<ul>
<li><a href="#">2020</a></li>
<li><a href="#">2019</a></li>
<li><a href="#">2018</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
```
在这个例子中,我们使用了`<nav>`元素来定义导航,使用`<ul>`和`<li>`元素来创建列表,使用CSS3的`position`属性和伪类选择器来控制菜单的显示和隐藏,使用`background-color`属性来设置背景颜色,使用`padding`属性来调整内容的间距,使用`border`属性来添加边框,使用`color`属性来设置文字颜色,使用`text-decoration`属性来取消链接的下划线等等。