<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网站导航示例</title><style>
body {
font-family: Arial, sans-serif;
margin:0;
padding:0;}
nav {
background-color:#333;}
nav ul {list-style-type: none;
margin:0;
padding:0;}
nav ul li {
display: inline-block;
position: relative;}
nav ul li a {
color: white;
text-decoration: none;
padding:10px 20px;
display: block;}
nav ul li a:hover, nav ul li a.active {
background-color:#4CAF50;}
nav ul li ul {
display: none;
position: absolute;
top:100%;
left:0;
background-color:#333;list-style-type: none;
padding:0;}
nav ul li ul li {
display: block;}
nav ul li:hover ul {
display: block;}</style></head><body><nav><ul><li><a href="#"class="nav-item">主页</a></li><li><a href="#"class="nav-item">产品</a><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></li><li><a href="#"class="nav-item">服务</a></li><li><a href="#"class="nav-item">关于我们</a></li><li><a href="#"class="nav-item">联系我们</a></li></ul></nav><script>
document.querySelectorAll('.nav-item').forEach(item =>{
item.addEventListener('mouseenter',()=>{
item.classList.add('active');});
item.addEventListener('mouseleave',()=>{
item.classList.remove('active');});});</script></body></html>