PHP怎么用CSS实现二级菜单伸缩？

html-css04

PHP怎么用CSS实现二级菜单伸缩？,第1张

你像各大商城的二级菜单，都是用js做的，只有css不行的，当鼠标放到标签时，触发一个事件，这个事件可以把css改变，具体方法是当你鼠标移动到标签上，显示另一个区域，鼠标移除，把显示的区域隐藏。希望能帮助到你，代码的话去js网站会有代码和教程

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script language="javascript">

function Set(ct){

if (document.getElementById(ct).style.display=="none"){

alert("s")

var divs=document.getElementsByTagName("div")

for(var i=0i<divs.lengthi++){

divs[i].style.display="none"

}

document.getElementById(ct).style.display="block"

}

else{

document.getElementById(ct).style.display="none"

}

}

</script>

<style type="text/css">

a{

display:block

width:200px

height:20px

text-decoration:none

text-align:center

margin-top:5px

border:1px solid #ccc

color:#fff

background:#333

font-weight:bold

outline:none

}

a:visited{color:#fff}

a:hover{

background:#639

color:#fff

}

#ct1,#ct2,#ct3,#ct4,#ct5{

border:1px solid #ccc

border-top:none

width:200px

height:30px

background:#9FF

}

</style>

</head>

<body>

<a href="javascript:Set('ct1')" hidefocus="true">公司介绍</a>

<div id="ct1" style="display:none">公司介绍内容区</div>

<a href="javascript:Set('ct2')" hidefocus="true">产品介绍</a>

<div id="ct2" style="display:none">产品介绍内容区</div>

<a href="javascript:Set('ct3')" hidefocus="true">公司文化</a>

<div id="ct3" style="display:none">公司文化内容区</div>

<a href="javascript:Set('ct4')" hidefocus="true">公司活动</a>

<div id="ct4" style="display:none">公司活动内容区</div>

<a href="javascript:Set('ct5')" hidefocus="true">留言内容</a>

<div id="ct5" style="display:none">留言内容内容区</div>

</body>

</html>

说实话 这么长的代码 还没分