代码写多了，有些使用过的方法和技巧会一时半会想不起来，平日记录下来，方便自己和有需要的人日后查阅。
<html>
<head>
<style type="text/css">
div.searchButton
{
width: 68px;
height: 24px;
border: 1px solid #a8a8a8;
font-family: 微软雅黑;
color: #585959;
font-size: 12px;
line-height: 24px;
text-align: center;
cursor: pointer;
float: left;
}
div.menuButton
{
width: 18px;
height: 24px;
border: 1px solid #a8a8a8;
text-align: center;
line-height: 24px;
cursor: pointer;
color: #d0d0d0;
float: left;
margin-left: 1px;
font-size: 12px;
}
div.menuButton:hover
{
color: #000000;
}
div.menuButton.openMenuPanel
{
color: Orange;
}
div.menuPanel
{
width: 140px;
height: 80px;
border: 1px solid #a8a8a8;
background-color: #ffffff;
clear: both;
}
div.menuPanel div
{
width: 140px;
height: 39px;
font-family: 微软雅黑;
color: #585959;
font-size: 18px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid #a8a8a8;
cursor: pointer;
}
div.menuPanel div:hover
{
background-color: #f1f1f1;
}
div.menuPanel div:last-child
{
border-bottom: none;
height: 40px;
}
</style>
<!-- 此处请引用jQuery和jQuery-ui库 -->
<script type="text/javascript">
$(function () {
$('.menuButton').click(function () {
$(this).addClass('openMenuPanel');
$('.menuPanel').show();
$(document).one('click', function () {
$('.menuPanel').hide();
$('.menuButton').removeClass('openMenuPanel');
});
return false;
}).next().position({
my: 'left top',
at: 'left bottom',
of: '.searchButton'
}).hide(); $('.menuPanel').children('div').click(function () {
$('.searchButton').html($.trim($(this).html()));
});
});
</script>
</head>
<body>
<div class="searchButton">
选项-1
</div>
<div class="menuButton">
▼
</div>
<div class="menuPanel">
<div>
选项-1
</div>
<div>
选项-2
</div>
</div>
</body>
</html>