1.布局：

<div class="show">

<img src="~/images/head_icon.png" />

<div class="drop" style=" display:none; z-index:80000" id="profileMenu">

<ul>

<li>

<a class="pass" style="cursor: pointer"

href='#'>

<span>修改密码</span>

</a>

</li>

<li>

<a class="quit" style="cursor: pointer"

href='#'

><span>退出</span></a>

</li>

</ul>

</div>

</div>

2.js控制：

function dropMenu(obj) {

$(obj).each(function () {

var theSpan = $(this);

var theMenu = theSpan.find(".drop");

var tarHeight = theMenu.height();

theMenu.css({ height: 0, opacity: 0 });

var t1;

function expand() {

clearTimeout(t1);

//theSpan.find('a').addClass("selected");

theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);

}

function collapse() {

clearTimeout(t1);

t1 = setTimeout(function () {

// theSpan.find('a').removeClass("selected");

theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {

$(this).css({ display: "none" });

});

}, 250);

}

theSpan.hover(expand, collapse);

theMenu.hover(expand, collapse);

});

}

更多信息请查看IT技术专栏