html+css下拉菜单怎么制作

使用HTML和CSS制作下拉菜单的方法如下：

1、编写带有div导航的html代码：

2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。

3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。

5、制作导航css：

大致思路

左侧：菜单，给每个菜单设置id和onclick点击事件，onclick事件触发的函数假设写为display()

右侧：写个固定样式的div，id假设设置为board。

如果你的菜单内容在服务器

display()的实现如下

function display(){$.ajax({type: "POST",url: 菜单所请求的内容地址,data: this.id等等相关的请求标志,success: funtion(data){$('board').html(data)},//返回数据填充dataType: dataType})}

如果菜单内容写死在页面内

那么右侧：写和菜单数一样多的div，把所有的display属性设置为none

同时display()的实现如下

function display(){$('#'+$(this).attr('rel')).style.display='block'}

以上，伪代码，仅供参考

称作Tab效果，用JS实现的原理：

1、点击菜单，获取被点击菜单的索引值；

2、隐藏下方所有菜单需显示内容的容器；

3、只显示当前被点击的菜单的内容容器；

说明：索引值可通过自定义属性获取，也可以JS动态获取；

Tab效果

---