Html+css 实现级联菜单效果

最新推荐文章于 2026-07-02 16:08:59 发布

原创

最新推荐文章于 2026-07-02 16:08:59 发布 · 6k 阅读

收录于

当前文章被以下社区和专栏收录：

这篇博客展示了如何使用HTML和CSS实现导航菜单的级联下拉效果。通过定义样式和布局，创建了一个包含多个子菜单的水平导航条，当鼠标悬停在主菜单项上时，相应的子菜单会显示出来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航级联下拉效果</title>

<style type="text/css">
<!--

*{margin:0;padding:0;border:0;}
body {
font-family: arial, 瀹嬩綋, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-deco