二级菜单制作成果 

<style type="text/css">
*{margin:0px auto; padding:0px; font-family:微软雅黑; font-size:20px; border-radius:8px;}
#kuang{ width:200px; height:300px;}
.list{ width:200px; height:60px; text-align:center; vertical-align:middle; font-weight:bold;}
.list:hover{ background-color:#F03; color:#FFF;}


</style>
</head>

<body>
<div id="kuang" style=" width:200px; height:400px; background-color:#F03;">
<br/>
<div id="wai"></div>
<div class="list">首页</div>

<div class="list"  onclick="xiao()">服务中心</div>

<div id="xiao" style="display:none" onclick="xiao()">

       <div class="x1" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">产品介绍</div>
       <div class="x1" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">合作洽谈</div>
       <div class="x1"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">联系电话</div></div>
       
       
<div class="list" onclick="x1()">会员中心</div>
      <div id="x1" style="display:none" onclick="x1()">
      <div class="x1" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">会员注册</div>
       <div class="x1" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">密码找回</div>
       <div class="x1"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">客服电话</div></div>
       
<div class="list" onclick="x2()">售后中心</div>
        <div id="x2"  style="display:none" onclick="x2()">
        <div class="x2" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">产品退换</div>
       <div class="x2" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">意见反馈</div>
       <div class="x2"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">售后电话</div></div>
       
<div class="list" onclick="x3()">联系客服</div>
       <div id="x3"   style="display:none" onclick="x3()">
       <div class="x3" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">客户咨询</div>
       <div class="x3" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">信息投诉</div>
       <div class="x3"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">投诉电话</div></div>
       
<div class="list" onclick="x4()">在线咨询</div>
       <div id="x4" style="display:none" onclick="x4()">
       <div class="x4" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">人工咨询</div>
       <div class="x4" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">短讯回复</div>
       <div class="x4"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">咨询电话</div></div>

</div>
</body>
</html>
<script>
function xiao()
{
    var xiao1=document.getElementById("xiao");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }
    
    }
function x1()
{
    var xiao1=document.getElementById("x1");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }
    
    }
function x2()
{
    var xiao1=document.getElementById("x2");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }
    
    }
function x3()
{
    var xiao1=document.getElementById("x3");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }
    
    }
function x4()
{
    var xiao1=document.getElementById("x4");
    if(xiao1.style.display=="none")
    {
        xiao1.style.display="block";
        }
        else
        {
            xiao1.style.display="none";
            }
    
    }
    
    

</script>

 

posted @ 2016-11-10 22:31  欧元  阅读(208)  评论(0)    收藏  举报