<!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/html; charset=utf-8" />
<title>点击下拉显示</title>
<style type="text/css">
p, ul, li { padding: 0; margin: 0; list-style: none; }
#box { font-size: 12px; color: #00c; width: 58px; margin: 0 auto; }
p { width: 55px; height: 24px; line-height: 24px; padding-left: 3px; background: url(ico.gif) no-repeat right 4px; }
ul { width: 56px; border: 1px solid #9a99ff; display: none-; }
a { text-decoration: none; display: block; height: 24px; line-height: 24px; text-align: center; color: #00c; }
a:hover { background: #d9e1f6; }
</style>
<script type="text/javascript">
window.οnlοad=function ()
{
var oP=document.getElementById('btn');
var oUl=document.getElementById('ul1');
oP.οnclick=function ()
{
if(oUl.style.display=='block')
{
oUl.style.display='none';
}
else //none
{
oUl.style.display='block';
}
};
};
</script>
</head>
<body>
<div id="box">
<p id="btn">输入法</p>
<ul id="ul1" style="display:block;">
<li><a href="#">手写</a></li>
<li><a href="#">拼音</a></li>
<li><a href="#">关闭</a></li>
</ul>
</div>
</body>
</html>