称作Tab效果，用JS实现的原理1点击菜单，获取被点击菜单的索引值2隐藏下方所有菜单需显示内容的容器3只显示当前被点击的菜单的内容容器说明索引值可通过自定义属性获取，也可以JS动态获取Tab效果；html做鼠标悬浮菜单上的选项能出现下拉菜单，CSS+JS做出此效果ltbody内代码为ltUL id=fm ltLIltA href=quot#quot一级菜单栏目ltA ltUL ltLIltA href=quot#quot一级菜单目录ltAltLI ltLIltA href=quot#quot一级菜单目录ltAltLI ltLIltA href=quot#quot一级菜单目录ltAltLI ltLI；lthtmllthtml网页开始和结束标签 ltheadlttitle浏览器标题标签 ltbody网页内容标签 lth1lth6网页内容标题标签 ltp网页内容中段落的标签 ltbr 网页内容中段落的折行标签 align=quotcenterquot居中属性定义标签 lthr 水平线定义标签 lt！要隐藏的注释内容隐藏注释定义标签 lt；下拉菜单实现代码如下ltHTML ltHEAD ltSCRIPT LANGUAGE=quotjavascriptquot ltSCRIPT ltSCRIPT LANGUAGE=quotjavascriptquot function Body_InitoSelect，oText var iLeft= oSelectoffsetLeftvar iTop = oSelectoffsetTopvar iWidth=oSelectclientWidthvar iHeight=oSelectclientHeight；写js代码 1，for循环遍历菜单 2默认菜单1蓝色背景，其他的无色 3鼠标点击触发事件，根据index标号来确定点击的是哪一个菜单，选中的菜单变蓝色index这个属性在元素里面一般没有，但是在js里面可以加上思路大体这样，下面给你参考代码效果。

5设置你的下拉菜单就行了 quot内容quot “外观” quot高级quot quot位置quot6调整一下你的切片位置和大小7预览f128文件导出html和图像9ok大致步骤就这么多再打开 dreamweaver 1quot插入quot“图像对象”“fireworks HTML”2“浏览”将做好的那个导航条在加进来；pagehtml 弹出窗口的文件名newwindow 弹出窗口的名字不是文件名，非必须，可用空#39#39代替height=100 窗口高度width=400 窗口宽度top=0 窗口距离屏幕上方的象素值left=0 窗口距离屏幕左侧的象素值toolbar=no 是否显示工具栏，yes为显示menubar，scrollbars 表示菜单栏和滚动栏resizable；18首先我们的html里，添加好导航内容28后面的就是网页的具体内容了，这里的代码简单一些38样式里，我们先定义一些菜单里的样式48这时运行页面时，在滚动条滚动下去后，导航是会消失不见的58为了让导航栏固定在顶部，我们可以在导航容器里添加样式positionfixedtop0关键是第一个样；lthtml首先，我们引用normalizecss作为默认样式，以确保我们的菜单在每个浏览器是一样的我们使用字体图标fontawesome来显示菜单项向下的图标我们还需要引用jQuery来实现菜单的切换面板按钮每个网站面板导航按钮都类似它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现基本。

ltdiv class=quotwrapquot style=quot这个宽度固定，可以是百分比，设置超出隐藏quot ltul style=quot这个宽度设置足够长，移动就是这个元素的left值quot ltli黄色ltli ltli绿色ltli ltli黄色ltli ltul ltdiv。

采用单页面的方式，内容都写在页面中，初始化时，仅显示当前内容，其他内容隐藏，通过点击导航条来切换需要显示的内容采用iframe的方式，要显示的内容在主html中，内容显示在html的iframe标签中，通过改变iframe的src来加载不同的内容目前很多网站都是采用第一种方式论体验，第二种方式好论方便；不用脚本虽然也能实现，只是结构和样式相对复杂，不如使用脚本，清晰明了隐藏显示部分可以为任何想要的内容代码如下lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot；选项2option #160option value=quotoption3quot选项3optionselect 这样，当用户选择一个选项并提交表单时，选中的选项值将作为名称为 myDropdown 的参数传递给服务器以上是创建简单HTML下拉菜单的基本步骤您可以根据需要自定义下拉菜单的样式和行为，例如添加CSS样式或JavaScript事件处理程序；关键在于 下级菜单平时 display 而当上级菜单的超链接被鼠标放上时 即 ahover，下级菜单 displayblock 比如下级菜单 的class 是 submenu， 上级菜单 menu submenu display 平时隐藏 menu ahover submenu displayblock 要保证 每个submenu是a 的子元素；1首先打开电脑上的可编辑网页的软件，新建一个html页面，然后将其保存在桌面上这里使用的是DW2接下来在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码如图片所示3因为菜单栏一般都是有链接的，这就需要为每个li标签添加一个a标签，并增加适当的样式使得；1新建html页面 打开html编辑软件，新建一个html页面如图2添加导航标签 在ltbody标签里新建一个ltulltul标签，然后在ltul标签里添加几个ltliltli标签如图3在ltli标签内添加文字在新建的ltli添加要显示的内容如图4创建样式标签 在lttitle标签后新建一个ltstyletype=\quott；如图所示，二级下拉菜单一般都是这样来制作的，就是在li标签里面再放一个ul标签然后就会有这样的效果了，不过距离二级菜单有点差距接着我们先把二级下拉菜单之间的margin和padding值去掉然后设置divulli，需要注意的是，是子代选择器因为我们不需要全部的li左浮动如图，浮动后就成了，距离二级菜单。