横竖列表下拉隐藏显示

<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{150px; height:300px; position:fixed; left:100px; top:200px}
.yiji{ 150px; height:35px; background-color:#63C; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}
#erji1{ 150px; display:none}
.xiang21{150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}
#erji2{ 150px; display:none}
.xiang22{150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}
#erji3{ 150px; display:none}
.xiang23{150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}

#heng{ 700px; height:36px; border:1px solid #60F;}
.list{ float:left; 100px; height:36px; text-align:center; line-height:36px; vertical-align:middle; font-weight:bold}
.list:hover{ cursor:pointer; background-color:#63F; color:white;}
#ej1{ 100px; height:100px; position:relative; top:36px; left:-100px; background-color:#06C; display:none}
#ej2{100px; height:100px; position:relative; top:36px; left:-100px; background-color:#9C3;display:none}
#ej3{100px; height:100px; position:relative; top:36px; left:-100px; background-color:#F33;display:none}
#ej4{100px; height:100px; position:relative; top:36px; left:-100px; background-color:#696;display:none}
#ej5{100px; height:100px; position:relative; top:36px; left:-100px; background-color:#FF3;display:none}

</style>
</head>

<body>

<div id="menu">
	<div class="yiji" onclick="showa('erji1')">
    	首页
    </div>
    <div id="erji1">
    	<div class="xiang21">首页1</div>
        <div class="xiang21">首页2</div>
        <div class="xiang21">首页3</div>
    </div>
    
    
    <div class="yiji" onclick="showa('erji2')">
    	产品中心
    </div>
    <div id="erji2">
    	<div class="xiang22">产品1</div>
        <div class="xiang22">产品2</div>
        <div class="xiang22">产品3</div>
    </div>
    
    <div class="yiji" onclick="showa('erji3')">
    	活动中心
    </div>
    <div id="erji3">
    	<div class="xiang23">活动1</div>
        <div class="xiang23">活动2</div>
        <div class="xiang23">活动3</div>
    </div>
</div>

<br />
<div id="heng">

	<div class="list" onmouseover="showc('ej1')" onmouseout="hidec('ej1')">首页</div>
    	<div style="float:left; 0px">
        	<div id="ej1"></div>
        </div>
    <div class="list" onmouseover="showc('ej2')" onmouseout="hidec('ej2')">产品中心</div>
    	<div style="float:left;0px">
        	<div id="ej2"></div>
        </div>
    <div class="list" onmouseover="showc('ej3')" onmouseout="hidec('ej3')">活动中心</div>
    	<div style="float:left;0px">
        	<div id="ej3"></div>
        </div>
    <div class="list" onmouseover="showc('ej4')" onmouseout="hidec('ej4')">新闻中心</div>
    	<div style="float:left;0px">
        	<div id="ej4"></div>
        </div>
    <div class="list" onmouseover="showc('ej5')" onmouseout="hidec('ej5')">联系我们</div>
    	<div style="float:left;0px">
        	<div id="ej5"></div>
        </div>

</div>


<script type="text/javascript">
function showa(d)
{
	//找对应的二级菜单
	var ej = document.getElementById(d);
	if(ej.style.display=="block")
	{
		ej.style.display="none";
	}
	else
	{
		ej.style.display = "block";
	}
}

function showc(d)
{
	var ej = document.getElementById(d);
	ej.style.display="block";
}

function hidec(d)
{
	var ej = document.getElementById(d);
	ej.style.display="none";
}

</script>
</body>
横竖列表 下拉隐藏显示

横竖列表下拉隐藏显示
