如何使用 HTML 和 CSS 创建大型菜单？
HTML 是一种用于创建网页的标记语言，而 CSS 是一种样式表语言，用于设计以 HTML 等标记语言编写的文档。在本文中，我们将了解如何仅借助 HTML 和 CSS 在网页上创建大型菜单。超级菜单是一种可扩展菜单，其中连续显示许多选项。我们必须创建一个菜单，当用户将鼠标移到导航栏内的元素上时会出现该菜单。
创建大型菜单的步骤
创建一个 HTML 文件：创建一个导航菜单并使用一个按钮作为导航栏中的菜单，以作为一个大型菜单，如下面的代码所示。
HTML
Mega Menu
menu.css
/* For navigation menu */
.navigationBar {
background-color: rgb(65, 122, 230);
overflow: hidden;
}
/* For texts in navigation bar */
.navigationBar a {
font-size: 20px;
color: white;
}
/* The dropdown div */
.downMenu {
float: left;
overflow: hidden;
}
/* For downButton to work as menu */
.downMenu .downBtn {
padding: 15px 15px;
background-color: inherit;
}
/* For hover effect on button */
.navigationBar a:hover, .downMenu:hover .downBtn {
background-color: rgb(65, 61, 61);
}
/* To hide mega menu */
downMenu-content {
position: absolute;
display: none;
width: 100%;
}
/* To show mega menu on hover */
.downMenu:hover .downMenu-content {
display: block;
}
/* Create columns in mega menu*/
.menuCol {
float: left;
width: 30%;
padding: 10px;
background-color: rgb(197, 189, 189);
}
/* Style the columns */
.menuCol a {
float: none;
color: black;
padding: 10px;
margin-bottom: 20px;
display: block;
}
/* Add hover */
.menuCol a:hover {
background-color: rgb(223, 223, 223);
}创建 CSS 文件：通过 CSS 设计导航栏和大型菜单，并将该文件链接到 HTML 页面。以下是上述 HTML 文件中使用的文件“menu.css”的内容。
菜单.css
/* For navigation menu */
.navigationBar {
background-color: rgb(65, 122, 230);
overflow: hidden;
}
/* For texts in navigation bar */
.navigationBar a {
font-size: 20px;
color: white;
}
/* The dropdown div */
.downMenu {
float: left;
overflow: hidden;
}
/* For downButton to work as menu */
.downMenu .downBtn {
padding: 15px 15px;
background-color: inherit;
}
/* For hover effect on button */
.navigationBar a:hover, .downMenu:hover .downBtn {
background-color: rgb(65, 61, 61);
}
/* To hide mega menu */
downMenu-content {
position: absolute;
display: none;
width: 100%;
}
/* To show mega menu on hover */
.downMenu:hover .downMenu-content {
display: block;
}
/* Create columns in mega menu*/
.menuCol {
float: left;
width: 30%;
padding: 10px;
background-color: rgb(197, 189, 189);
}
/* Style the columns */
.menuCol a {
float: none;
color: black;
padding: 10px;
margin-bottom: 20px;
display: block;
}
/* Add hover */
.menuCol a:hover {
background-color: rgb(223, 223, 223);
}
输出：
