如何用css或js设置如下图的样式，当点击的时候出现下拉菜单，显示里面的内容。

JavaScript018

如何用css或js设置如下图的样式，当点击的时候出现下拉菜单，显示里面的内容。,第1张

HTML：

<p class="p">基础</p>

<div class="show">

<ul>

<li><a href="#">aa</a></li>

<li><a href="#">ss</a></li>

<li><a href="#">dd</a></li>

<li><a href="#">ff</a></li>

<li><a href="#">gg</a></li>

</ul>

</div>

css:

.show{

display:none

}

js:

var isClick=true

$(".p").click(function(){

if(isClick){

$(".show").css("display","block")

isClick=false

}else{

$(".show").css("display","none")

isClick=true

}

})

思路，

要显示的内容用一个div包住，当你点击基础的时候，div显示，再点击时div隐藏

这个问题很常见，下拉子菜单的css加一个z-index:100。越大表示越在前。

不过要根据你的2块功能设置positon是relative还是absolute

如果2个都是absolute，那么z-index就可以解决。

但如果你想用默认或者用position:relative，z-index通常是无效的。我习惯是把下拉菜单html代码写到图片轮换之后，然后再设置下拉菜单的margin-top为负数，然后设置js图片轮换那块margin-top，调好数值，就可以看到效果。

如果你不懂relative和absolute的含义，就要去补习一下了。

实现这个功能 可以通过css 或者 就是实现此功能。 这就是 导航栏的 下拉菜单。你会css 或者js 就可以自己做 ，不会做 网上也有现成的代码 。自己找去吧 ，要是这个都不会 没还做什么网站啊？