<title>下拉菜单</title>

<title>下拉菜单</title>
<style type="text/css">
*
{
    margin:0px;
    padding:0px;
}
#pingmu
{
    width:100%;
    height:100%;
    position:fixed;
    background-color:#FF9;
}
#minzu
{
    width:200px;
    height:300px;
    border:1px solid #000;
    text-align:center;
    background-color:#FFF;
}
#minzu div
{
    width:200px;
    height:50px;
    font-size:20px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
}
#menu
{
    width:198px; 
    height:50px; 
    font-size:20px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
}
</style>
</head>

<body>
<div id="pingmu" onclick="guan()">
<input type="text" id="menu" value="民族" onclick="xiala()"/>
<div id="minzu" style="display:none">
    <div id="han" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">汉族</div>
    <div id="hui" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">回族</div>
    <div id="man" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">满族</div>
    <div id="chao" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">朝鲜族</div>
    <div id="miao" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">苗族</div>
    <div id="zhang" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">藏族</div>
</div>
</div>
</body>
<script type="text/javascript">
function caidan(a)
{
    a.style.backgroundColor="red";   //鼠标放上变为红色
}
function out(b)
{
    b.style.backgroundColor="white";    //鼠标移开变回白色
}
function quzhi(c)
{
    var s= c.innerText;
    var y=document.getElementById("menu");    //将选中的值传给表单
    y.value=s;
}
function xiala()
{
    document.getElementById("minzu").style.display="block";  //点击表单元素显示下拉菜单
    stopEventBubble(event);
}
function guan()
{
    document.getElementById("minzu").style.display="none";    //点击菜单外的屏幕部分下拉菜单消失
}


function stopEventBubble(event)    //阻止事件冒泡函数（阻止点击表单元素时下拉菜单消失）
{
    var e=event || window.event;
    if (e && e.stopPropagation)
    {
        e.stopPropagation();    
    }
    else
    {
        e.cancelBubble=true;
    }
}

注意：阻止事件冒泡函数（可复制直接使用）

function stopEventBubble(event)    //阻止事件冒泡函数
{
    var e=event || window.event;
    if (e && e.stopPropagation)
    {
        e.stopPropagation();    
    }
    else
    {
        e.cancelBubble=true;
    }
}