nav {
background-color: #333;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #ddd;
color: black;
}
通过上述HTML和CSS代码,我们就可以在网页上创建一个简单的导航菜单。该菜单包含4个链接,分别为首页、关于我们、产品中心和联系我们。当鼠标悬停在链接上时,链接的背景颜色会变为灰色,文字颜色变为黑色,以提示用户当前正在悬停的链接。这种简单的导航菜单可以满足大多数网站的需求,并且非常易于实现和维护。
