html下拉菜单怎么写_随笔

方法如下：

方法一：

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声明必须添加到相对位置定位的列表中。

下拉菜单

在计算机应用中，下拉式选单是选单的一种表现形式。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选单。下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中，并把这个下拉式选单置于主选单的一个选项下。下拉菜单内的项目可以据需要设置为多选或单选，可以用来替代一组复选框（设置为多选）或单选框（设置为单选）。这样比复选框组或单选框组的占用位置小，但不如它们直观。

首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单

<ul>

</ul>

</div>

如下图所示：

现在我们为nav添加样式,首先去掉默认的margin和padding，再去掉<ul><li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：

* { margin:0padding:0}

ul, li { list-style:none}

a { text-decoration:none}

.nav { border:2px solid #cccborder-right:noneoverflow:hiddenfloat:leftmargin:100px 0 0 300px}

.nav ul li { float:left}

.nav ul li a { width:120pxheight:40pxtext-align:centerline-height:40pxdisplay:blockborder-right:2px solid #cccbackground:#eeecolor:#666}

.nav ul li a:hover{ color:#f00}

</style>

打开页面预览效果

像这样，一个菜单横向菜单就建好了，下来我们给栏目一，栏目二，栏目三，添加二级下拉菜单

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

添加完二级栏目后，现在我们开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签，如一下样式：

.nav ul li ul { position:absolute}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}

我们刷新页面预览下效果

接下来我们隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：

.nav ul li ul { position:absolutedisplay:none}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}

.nav ul li:hover ul{ display:block}

再次预览效果，如下图所示：

至此，横向二级下拉菜单就制作完成了，这里附加上全部代码，以方便各位朋友参考，感谢各位朋友的浏览。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>横排二级下拉菜单</title>

* { margin:0padding:0}

ul, li { list-style:none}

a { text-decoration:none}

.nav { border:2px solid #cccborder-right:noneoverflow:hiddenfloat:leftmargin:100px 0 0 300px}

.nav ul li { float:left}

.nav ul li a { width:120pxheight:40pxtext-align:centerline-height:40pxdisplay:blockborder-right:2px solid #cccbackground:#eeecolor:#666}

.nav ul li a:hover{ color:#f00}

.nav ul li ul { position:absolutedisplay:none}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}

.nav ul li:hover ul{ display:block}

</style>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

不要用foreach，改成for语句，然后把i添加到那个变量明上，假设变量是dpactive，那么就会变成dpactive0，dpactive1，dpactive2......，这样名字就唯一了

比如你的$c.name+i字符串作为这个变量

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6281915.html

html下拉菜单怎么写

发表评论

评论列表（0条）