网页下拉菜单如何写(下拉菜单怎么写)

网页下拉菜单如何写,下拉菜单怎么写

内容导航：

html下拉菜单怎么写

网页制作中如何做下拉菜单

WAP网页可以实现下拉菜单吗

求助html下拉菜单怎么写

一、html下拉菜单怎么写

方法如下：方法一：HTML1、创建CSS菜单的HTML代码框架。我们使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。2、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。3、在“关于我们（About
Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。4、在HTML代码中添加样式表链接。目前我们已经完成了HTML代码，其内容是一个清晰的菜单和子菜单的层次布局结构。我们使用外置的CSS样式表，因此需要在代码的‘head’区域添加样式表链接。方法二：CSS1、创建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怎么做下拉菜单在Dreamweaver中轻松实现滑动折叠菜单-太平洋电脑网_weaver MX
2004简体中文版进阶教程(三)之弹出菜单-中华网科技频道/zh_.html蓝色理想 – 下拉菜单全攻略/tech/web/2003/一、 导航条的制作
首先进行一些必要的前期工作，按ctrl+j，打开page
properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。
按ctrl+f2打开objects面板，点击层[img=20,20]file:///g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamweaver篇.gif[/img]按钮后在页面中按住鼠标不放拖出一个层，然后在层的properties（属性）面板中设置各参数，layer
id框填入title，l、t、w、h框分别填入8、15、480、15，背景色填入#，如图。
将光标移至层内，点击objects面板上的表格按钮[img=21,21]file:///g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamweaver篇.gif[/img]，插入一个一行四列的表格，设置如图。
按住ctrl键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用”经典论坛”和”天极网”为例，并加上链接。
二、 下拉选单的制作 现在开始制作将要下拉出现的菜单，同样用层来制作。
再次从objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：layer
id框填入menu1，l、t、w、h框分别填入8、34、120、80，背景色填入#，其中l和t两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。
为了排版方便，我在这还是使用表格来做菜单。
这个层将作为”经典论坛”的下拉选单出现，填入你所需要的菜单链接。
同样的方法，再为”天极网”也做一个下拉选单（层menu2）。
这一步要注意的地方就是下拉选单所在的层（menu1、menu2）的位置非常重要（由l和t两个参数决定）。
它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。
因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。
按f2打开layer（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。
操作这一步是因为下拉菜单的初始状态是不可见的。
三、 显示和隐藏效果的添加 这一步骤是化腐朽为神奇的关键一步，大家仔细跟我来做。
本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。
1．导航条部分
首先按ctrl键不放点击导航条中的第一个单元格，现按shift+f3打开behaviors窗口，点[img=20,18]file:///g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamweaver篇.gif[/img]按钮，在下拉选项中选中”show-
hide layers”（如图）。
如果选项中没有这一项，则选择show events for下的ie 5.0后，重新点 按钮，此时”show-hide layers”将出现。
这时将会弹出一个窗口，如下图。
在named layers框中会列出当前网页所有的层，选中” layer “menu1” “，因为我们想要menu1这个层对”经典论坛”响应。
然后点下面的”show”按钮，ok。
这时会回到behaviors窗口，窗口中出现如下图所示字样，点击events下的文字”onclick”，会出现一个向下的小箭头，点击它，在下拉选项中选中onmouseover。
这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（show）。
下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。
再点[img=20,18]file:///g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamweaver篇.gif[/img]按钮，在下拉选项中选中”show-
hide layers”，在弹出窗口中选中” layer “menu1” “，因为我们想要menu1这个层对”经典论坛”响应。
然后点下面的”hide”按钮，ok。
回到behaviors窗口，点击向下的小箭头，在下拉选项中选中onmouseout。
2．下拉选单部分
先选中层menu1，方法是点击层的边缘或在layer面板中点击menu1，用与导航条部分同样的方法在behaviors窗口中为它添加显示与隐藏自己的命令。
这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。
最后层menu1的状态如图所示。
3．重复以上两部分，为导航条的第二个主菜单”天极网”和层menu2添加显示、隐藏层命令。
四、 下拉菜单的美化修饰 到这里，下拉菜单的功能效果已经实现了，你现在按f12就可以看到。
不过你一定也发现菜单有点难看，字不够精细，菜单选项的默认链接色不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。
1．定义菜单字体样式 按shift+f11打开css
style（样式）面板，点击面板下面的[img=18,15]file:///g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamweaver篇.gif[/img]按钮
在弹出的”new style”窗的tag框内选中td标签，type选第二项redefine html tag，define选this document
only，如图。
此时弹出设置窗口，不管其它的，只在右边的size框里选中12，单位为pixels。
2．定义菜单链接样式 在样式面板中，点击面板下面的 按钮，在弹出窗中， type选第三项use css
selector，tag框内选中a:hover标签，define选this document only，如图。
点击ok后在弹出窗中，color填#ff9933，decoration选none，点ok。
返回到样式面板，点击面板下面的[img=18,15]file:///g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamweaver篇.gif[/img]按钮，在弹出窗中，
type选第三项use css selector，tag框内选中a:link标签，define选this document only。
点击ok后在弹出窗中，color填#ffffff，decoration选none，点ok。
又返回到样式面板，点击面板下面的[img=18,15]file:///g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamweaver篇.gif[/img]按钮，在弹出窗中，
type选第三项use css selector，tag框内选中a:visited标签，define选this document only。
点击ok后在弹出窗中，color填#ffffff，decoration选none，点ok。
3．定义菜单边框样式 在样式面板中，点击面板下面的按钮，在弹出窗中， tag框内选中td标签，type选第二项redefine html
tag，define选this document only，如图。
弹出设置窗口，在左边的列表中选border，右边四条边宽度都输入为1，颜色设为黑色#，style选为solid。

三、WAP网页可以实现下拉菜单吗

答：没有在wap网站上面看到过这样的技术，其实这个主要不是网站的原因，主要还是我们大部分的手机都是不支持这样的功能的，所以即使网站想做出这样的功能，但是由于我们的手机都是无法看到的，便作罢了！

四、求助html下拉菜单怎么写

用css是可以实现这种效果，不够要改一下HTML框架：

• 模块1 模块1.1 模块1.2 模块1.3 模块1.4
• 模块2
• 模块3

CSS样式： *{paping: 0;margin:0;} li{width: 100px;height: 30px;background:
black;text-align: center;} a{text-decoration: none;color:#fff;margin-bottom:
10px;} .B li{float: left;} #C{clear: both;} #C a{color: black;paping:
8px;display: none;} #li1:hover a{display:
block;}效果：但以你给的HTML来看，应该是用JavaScript实现的。
html中的下拉列表：html代码 volvo saab opel audi 其中select是显示一个下拉列表(drop down
list)出来，option是下拉列表中的项目(item)，而option的文本内容(text
content)是下拉列表项目中显示到页面上的值，value是真正需要提交到服务端的值。
显示效果如下所示： 更复杂的下拉列表： html代码 volvo saab mercedes audi 这个下拉列表包含一个“项目组”(item
group)，这个组是无法选择的，使用label标签标记字面内容，真正起作用的，还是value属性。
看一下这个包含“项目组”的下拉列表 option中的参数：selected=”selected”
如果需要打开页面就默认选中某个option，需要用到selected参数： html代码 volvo saab mercedes audi
option中的参数：disabled=”disabled” 如果需要禁用某个项目，但是却又不想隐藏，可以使用disabled属性 html代码
volvo saab mercedes audi option中的参数：title 如果需要在鼠标放到某个项目上时，给出提示，可以使用title属性
html代码 volvo saab mercedes audi 其实，title也可以用在很多其他的html标签中！