通常用于电子商务或大型网站，大型菜单正变得越来越流行，因为它们提供了一种有效的解决方案来显示大量内容，同时保持干净的布局。在本教程中，咱们将学习如何使用漂亮的 css3 功能构建一个跨浏览器、很棒的纯 CSS 下拉巨型菜单。
这是您将要构建的内容：
您可以跳转到现场演示以查看它的实际效果。
1.构建导航栏
让咱们从一个基本菜单开始，它由一个无序列表和一些基本的 CSS 样式构建而成。为这个项目创建一个文件夹，并在其中创建这两个文件：index.html（用于 HTML 标记）和 style.css（用于样式表代码）。另外，在项目根目录中创建一个名为img的文件夹，并将一些图像移到那里以在菜单上使用。
目录结构如下所示：
my-project-folder/ ├── index.html ├── style.css └── img/ ├── img01.png ├── img02.png ├── img03.png ├── img04.png └── and other images
使用您喜欢的文本编辑器打开 index.html 文件并包含以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <title>Mega Drop Down Menu</title> </head> <body> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>
第 1 步：创建菜单容器
咱们现在将应用一些基本的 CSS 样式。对于菜单容器，咱们通过将左右边距设置为“auto”来定义一个固定的宽度。打开您的 style.css 文件并包含以下代码：
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* More code will go here */
}现在，让咱们看看如何使用一些 CSS3 特性来改进它。咱们需要为基于 Webkit 的浏览器（如 safari）和基于 Mozilla 的浏览器（如 Firefox）使用不同的语法。
对于圆角，在 #menu 块中添加以下语法：
-moz-border-radius: 10px -webkit-border-radius: 10px; border-radius: 10px;
对于背景，咱们将为旧浏览器使用渐变和后备颜色。为了在选择颜色时保持一致性，有一个名为Facade的很棒的工具，可以帮助您找到基本颜色的较浅和较深的色调。将以下代码添加到 #menu 块：
background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
第一行应用了一个简单的背景颜色（对于较旧的浏览器）；第二行和第三行使用两种颜色从上到下创建渐变：#0272a7 和#013953。
咱们现在可以添加一个较暗的边框，并使用使用“box-shadow”功能创建的“假”嵌入边框来润色设计。所有兼容浏览器的语法都是相同的：第一个值是水平偏移量，第二个值是垂直偏移量，第三个是模糊半径（小值使其更清晰；在咱们的示例中为 1 像素） . 咱们将所有偏移设置为 0，因此模糊值将创建一个统一的光边界：
-moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff;
这是#menu 容器的最终 CSS 代码，它应该放在 style.css 文件中：
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}第 2 步：样式化菜单项
咱们将从左侧对齐的所有菜单项开始，并用右侧边距将它们隔开（悬停状态需要填充）：
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}对于悬停状态和下拉菜单，我为背景选择了灰色配色方案。
备用颜色将为浅灰色 (#F4F4F4)，渐变将从顶部 (#F4F4F4) 应用到底部 (#EEEEEE)。圆角将仅应用于顶角，因为咱们会将下拉菜单粘贴在菜单项的正下方。
background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
这里的左右填充稍微小一些，因为咱们在悬停时出现了 1 个像素的边框。如果咱们保持相同的填充，菜单项将被推到右边两个像素，因为鼠标悬停时添加了左右边框。为避免这种情况，咱们将在两侧移除 1 个像素的填充，因此咱们有 9 个像素而不是 10 个。
border: 1px solid #777777; padding: 4px 9px 4px 9px;
然后，咱们只在顶部添加圆角，这样下拉菜单就会完美地贴在父菜单项下：
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
这是悬停菜单项的最终 CSS。将代码添加到您的 style.css 文件中：
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}对于链接，咱们将使用简单的语法应用漂亮的文本阴影：第一个和第二个值是阴影的水平和垂直偏移量（在咱们的示例中为 1 像素），第三个值是模糊（也是 1 像素）和然后咱们有（黑色）颜色：
text-shadow: 1px 1px 1px #000;
这是链接的最终 CSS。添加到 style.css：
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}在鼠标悬停时，由于背景是灰色的，咱们将为链接使用较深的颜色 (#161616)，为文本阴影使用白色。添加到 style.css：
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}最后，咱们需要一种方法来通过使用简单的箭头图像作为背景来指示是否存在下拉菜单，它将使用填充定位在右侧，并且上边距将与其正确对齐。在悬停时，这个上边距将设置为 7 像素而不是 8，因为咱们在鼠标悬停时会出现一个额外的边框（否则，箭头会在悬停时向下推 1 个像素）：
/* This requires that you have drop.png image in an "img" folder which resides in the project root folder*/ #menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; }
这是菜单容器和链接的最终代码；目前只有“home”项没有任何下拉内容：
索引.html
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul>
菜单.css
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}结果是：
2.编码下拉
所有下拉菜单都将进入列表项元素内，就在标签<li>下方。<a>“经典”下拉菜单通常包含嵌套在父列表项中的列表，如下所示：
<ul id="menu"> <li><a href="#">Item 1</a>< <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> <li><a href="#">Subitem 3</a></li> </ul> </li> <li><a href="#">Item 2</a>< <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> </ul> </li> </ul>
一般结构
对于咱们的 Mega Menu，咱们将简单地使用标准 DIV，而不是嵌套列表，这将像任何嵌套列表一样工作：
<ul id="menu"> <li><a href="#">Item 1</a> <div> Drop down Content <div> </li> <li><a href="#">Item 2</a> <div> Drop down Content <div> </li> </ul>
这将是下拉菜单的基本结构。它背后的想法是能够包含任何类型的内容，例如段落、图像、自定义列表或联系表格，并组织成列。
第 1 步：下拉容器
不同大小的容器将容纳整个下拉内容。我根据它们将包含的列数选择了标签名称。
为了隐藏下拉菜单，咱们将使用带有负左边距的绝对定位：
position:absolute; left:-999em;
背景回退颜色与用于菜单项的颜色相同。现代浏览器会在顶部显示以#EEEEEE 开头的渐变（以匹配父菜单项渐变），并在底部以#BBBBBB 结尾：
background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
咱们将再次使用圆角，除了左上角：
-moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
这是完整的代码。在 style.css 中添加：
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}为了说明这一点，让咱们看看如果咱们不注意细节会是什么样子：
现在这是咱们的示例：
如您所见，下拉菜单很好地贴在其父菜单项上。
为了拥有一个完美的下拉容器，咱们需要为每个容器指定宽度。在 style.css 中添加以下代码：
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}最后在 style.css 中，为了显示鼠标悬停时的下拉菜单，咱们将简单地使用：
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;top:auto;
}第 2 步：使用下拉容器
咱们的课程已准备好包含在咱们的菜单中。咱们将使用它们中的每一个，从 5 列布局到单列下拉菜单。在 index.html 中，仅将ul元素及其所有内容替换为：
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#" class="drop">5 Columns</a> <div class="dropdown_5columns"> <p>5 Columns content</p> </div> </li> <li><a href="#" class="drop">4 Columns</a> <div class="dropdown_4columns"> <p>4 Columns content</p> </div> </li> <li><a href="#" class="drop">3 Columns</a> <div class="dropdown_3columns"> <p>3 Columns content</p> </div> </li> <li><a href="#" class="drop">2 Columns</a> <div class="dropdown_2columns"> <p>2 Columns content</p> </div> </li> <li><a href="#" class="drop">1 Column</a> <div class="dropdown_1column"> <p>1 Column content</p> </div> </li> </ul>
这是上面代码的预览：
3.创建下拉容器列
现在咱们已经准备好容器，咱们将按照 960 网格系统的原则创建大小不断增加的列。将其包含在 style.css 中：
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}使用列
这是一个包含多列的下拉示例。在此示例中，咱们使用各种列进行了不同的组合。以下是<li>菜单中第二个元素的代码：
<ul id="menu"> <!--<li></li>--> <li><a href="#" class="drop">5 Columns</a> <div class="dropdown_5columns"> <div class="col_5"> <p>This is a 5 Columns content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_4"> <p>This is a 4 Columns content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_3"> <p>This is a 3 Columns content</p> </div> <div class="col_2"> <p>This is a 2 Columns content</p> </div> </div> </li> </ul>
代码预览：
4. 向右对齐
现在，让咱们看看如何将菜单和下拉内容对齐到导航栏的右边缘；不仅菜单项，下拉容器也应该改变。
为此，在 style.css 中，咱们将添加一个名为.menu_right父列表项的新类，因此咱们重置右边距并将其浮动到右侧：
#menu .menu_right {
float:right;
margin-right:0px;
}接下来，让咱们看看下拉菜单。在之前的 CSS 代码中，圆角应用于除左上角之外的所有角，以匹配父菜单项的背景。现在咱们希望这个下拉菜单粘在父菜单项的右边缘。因此，咱们将使用名为 .align_right 的新类覆盖边界半径值，并将右上角设置为 0。
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}最后但同样重要的是，咱们想让下拉菜单出现在右侧；所以咱们将使用咱们的新类并重置左边的值，然后让它粘在右边：
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}现在可以在菜单中使用它了：
<li class="menu_right"><a href="#" class="drop">Right</a> <div class="dropdown_1column align_right"> <div class="col_1"> <p>This is a 1 Column content</p> </div> </div> </li>
以及上面代码的一个小预览：
5.添加和样式化内容
现在咱们已经准备好整个结构，咱们可以添加任意数量的内容：文本、列表、图像等。
第 1 步：一般样式
让咱们从段落和标题的一些基本样式开始：
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}咱们可以为下拉列表中的链接应用漂亮的蓝色：
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}第 2 步：列出样式
让咱们修改咱们的列表；咱们必须重置一些样式，例如导航栏中使用的背景颜色或边框：
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}第 3 步：样式化图像
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}并在左侧创建一个带有图像的段落：
.img_left {
width:auto;
float:left;
margin:5px 15px 5px 5px;
}第 4 步：文本框
为了突出一些内容，这里是一个带有圆角和一个微妙的嵌入阴影的暗盒示例：
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}第 5 步：重新设计列表
最后，这是另一种使用 CSS3 设置列表样式的方法：
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}6.处理浏览器兼容性和IE6
所有浏览器都处理非锚标签上的悬停。. . Internet Explorer 6 除外；所以咱们的超级菜单仍然无法与这个旧浏览器一起使用。咱们可以通过添加此功能的行为文件来解决此问题。您可以在此处找到它，并使用条件注释仅针对 IE6；更多解释可以通过这篇来自 CSS-Tricks 的文章找到。
以 IE6 为目标，咱们将使用以下代码：
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->我在本教程中使用了一些 PNG 文件，众所周知，IE6 不支持透明度，因此咱们有不同的解决方案：
将它们转换为 GIF 或 PNG-8 格式
使用脚本
例如，使用TweakPNG设置默认灰色以外的背景颜色
我会让你选择一个适合你需要的。现在，让咱们回顾一个完整的工作示例。
结论
我希望你喜欢这个关于创建大型菜单的教程。感谢您的关注！
- 第 1 步：创建菜单容器
- 第 2 步：样式化菜单项
- 一般结构
- 第 1 步：下拉容器
- 第 2 步：使用下拉容器
- 使用列
- 第 1 步：一般样式
- 第 2 步：列出样式
- 第 3 步：样式化图像
- 第 4 步：文本框
- 第 5 步：重新设计列表
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
发表评论