Html+css 实现级联菜单效果

最新推荐文章于 2021-07-19 11:04:22 发布

jonlys

最新推荐文章于 2021-07-19 11:04:22 发布

阅读量5.8k

点赞数 1

分类专栏： HTML+CSS 文章标签： html css xhtml float border

本文链接：https://blog.csdn.net/jonlys/article/details/6448126

版权

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

摘要由CSDN通过智能技术生成

<!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:h