方法如下：
方法一：
HTML
1、创建CSS菜单的HTML代码框架。我们使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
2、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
3、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
4、在HTML代码中添加样式表链接。目前我们已经完成了HTML代码，其内容是一个清晰的菜单和子菜单的层次布局结构。我们使用外置的CSS样式表，因此需要在代码的‘head’区域添加样式表链接。
方法二：
CSS
1、创建CSS文件。完成HTML框架代码后，我们需要使用样式表来实现下列菜单功能。我们使用CSS选择器来定位HTML中的菜单项，因此无需在HTML中添加额外的ID或class属性。
我们通过UL内嵌UL的方式来定位子菜单，并使用display:none;属性 将其隐藏。
在鼠标悬停在LI元素上时，我们需要将其转换为block模式，重新显示相应的子菜单，而>命令可以定位鼠标悬停位置的LI元素。
2、使用CSS样式表显示主菜单。
position:relative;声明让子菜单根据主菜单相对位置显示。
display:inline-block;声明可以将菜单调整到合适宽度。
3、设置鼠标悬停时的字体渐变颜色。图示中的代码在悬停时，将链接变为深色渐变背景和白色文字的字体。
4、使用样式表显示子菜单。当前子菜单样式继承主菜单元素。我们要让子菜单项垂直显示在主菜单项下方。
5、定位下拉菜单，并将菜单项对齐。这将会同时去除灰色背景。
position:relative;声明必须添加到列表项顶端。
position:absolute;声明必须添加到相对位置定位的列表中。
下拉菜单
在计算机应用中，下拉式选单是选单的一种表现形式。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其 他选项的另一个选单。下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中，并把这个下拉式选单置于主选单的一个选项下。下拉菜单内的项 目可以据需要设置为多选或单选，可以用来替代一组复选框（设置为多选）或单选框（设置为单选）。这样比复选框组或单选框组的占用位置小，但不如它们直观。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Strict//EN" ">方法步骤：
写好HTML代码以实现下拉菜单。
在网页上看到初步效果。
添加JavaScript代码实现功能，hide（）函数实现display的隐藏。
在HTML代码中引用show()和hide()函数。
CTR+S保存代码，在浏览器中F5刷新网页查看效果。
其他方法：
利用Html5+css实现的下拉菜单炫酷效果。<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
{
margin: 0;
padding: 0;
}
#nav{
background-color: #EEEEEE;
height: 40px;
<!DOCTYPE html>。
使用JavaScript实现下拉菜单的效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
通过JQuery方法实现的下拉菜单的炫酷效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
注意事项：记得CTR+S常记得保存的备份，F5刷新网页。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src=";
这是jq动画，不行的话我再换一种
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
{ margin:0; border:0; padding:0; list-style:none; list-style-type:none;}
nav { width:1000px; float:left;}
nav li { float:left; width:99px; margin-right:1px; display:inline;}
nav li span { display:block; width:99px; height:30px; line-height:30px; text-align:center; background:#C03; cursor:pointer;}
nav li p { top:30px; left:0; width:99px; height:auto; display:none;}
nav li p a { display:block; width:99px; height:28px; line-height:28px; text-align:center; margin-top:1px; background:#F03; color:#fff;}
nav li:hove span { background:#30F;}
nav li:hover p { display:block;}
nav li p a:hover { background:#36F;}
bga { float:left; background:#336; width:100%; height:100px; color:#fff;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>频道1</span></a>
<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>
</li>
<li><a href="#"><span>频道2</span></a></li>
</ul>
<div class="bga">111</div>
</body>
</html>
上面是用li:hover实现的，下面用JS实际，在网上找了一个JQ的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
{ margin:0; border:0; padding:0; list-style:none; list-style-type:none;}
nav { width:1000px; float:left;}
nav li { float:left; width:99px; margin-right:1px; display:inline;}
nav li span { display:block; width:99px; height:30px; line-height:30px; text-align:center; background:#C03; cursor:pointer;}
nav li p { top:30px; left:0; width:99px; height:auto; display:none;}
nav li p a { display:block; width:99px; height:28px; line-height:28px; text-align:center; margin-top:1px; background:#F03; color:#fff;}
nav lion span { background:#30F;}
nav lion p { display:block;}
nav li p a:hover { background:#36F;}
bga { float:left; background:#336; width:100%; height:100px; color:#fff;}
</style>
<script type="text/javascript" src=">
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）