下拉菜单

#s1{width:150px; height:300px; position:fixed; left:100px; top:100px;}

.yiji{ width:150px; height:35px; background-color:#93C; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; clear:white; font-weight:bold}

#aa1{ width:150px; display:none}

.qqq1{ width:150px; height:35px; background-color:#0F0; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; clear:white; font-weight:bold}

#aa2{ width:150px; display:none}

.yyy2{ width:150px; height:35px; background-color:#0F0; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; clear:white; font-weight:bold}

#aa3{ width:150px; display:none}

.www2{ width:150px; height:35px; background-color:#0F0; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; clear:white; font-weight:bold}

 

 

div id="s1" style="width:150px; height:300px">

<div class="yiji" onclick="caidan('aa1')">

QQ

</div>

<div id="aa1">

<div class="qqq1">111</div>

     <div class="qqq1">222</div>

      <div class="qqq1">333</div>

    </div>

            <div class="yiji"  onclick="caidan('aa2')">

    YY    

</div>     

<div id="aa2">    

<div class="yyy2">111</div>     

<div class="yyy2">222</div>      

<div class="yyy2">333</div>    

</div>        

<div class="yiji" onclick="caidan('aa3')">    

微信     </div>  <div id="aa3">

    <div class="www2">111</div>

     <div class="www2">222</div>

      <div class="www2">333</div>

    </div>

</div>

<script type="application/javascript">

function caidan(d)

{  

var aa = document.getElementById(d);

 if(aa.style.display=="block")

 {  

 aa.style.display="none";  

 }   

else

  {   

 aa.style.display = "block";

  }

 }

</script>