如何做首页的悬浮导航菜单？

jmyz_0455 2016-04-02 10:35:39

我需要在网页顶部的菜单栏中添加一个按钮，点击这个按钮时会弹出一个悬浮框，其内容是固定的，不需要用到数据绑定或Ajax。这个悬浮框的位置就紧紧贴在按钮下面。

效果类似于CSDN顶部菜单，只不过我不是把鼠标放上去的时候就有悬浮框，而是点击的时候才有。我一开始的时候用的是div来做，display用于控制显示或隐藏，但发现了三个问题：

一、由于顶部的菜单栏是个母版页，所以不知道是不是这样的原因，导致了这个悬浮的div总是跟内容页的内容叠在一起，即便给悬浮框设置了z-index也没用，能不能让这个悬浮的div紧跟按钮下面又能显示时置于页面最上层呢？

二、有可能是问题一的缘故，我在悬浮框设置了鼠标离开事件，但是鼠标没移动到到div本身，而是移动到div的填充内容（padding）后离开，也会触发鼠标离开事件，能不能让鼠标移动事件更加准确呢？

三、作为HTML标签的li标签，怎样才能在被点击的时候，会触发像.NET服务器控件的鼠标点击事件（OnClientClick()），请问怎么添加这个点击事件呢？我主要是想在点击不同li时在后台触发不同的鼠标点击事件。

这两个问题求解，以下是相关代码，谢谢。



<input type="button" id="btnth" runat="server" class="topth" onclick="display('divth')" value="按钮"/>

<div id="divth" style="display:none;" class="ndiv" onmouseout="hide('divth')">

    <ul>

        <li><a>选择项</a></li>

        <li><a>选择项</a></li>

        <li><a>选择项</a></li>

    </ul>

</div>



function display(id)

{

    document.getElementById(id).style.display="block";

}

function hide(id)

{

    document.getElementById(id).style.display = "none";

}



.ndiv

{

	margin-top: -10px;

    padding-right: 10px;

    width: 136px;

    height: 110px;

    float: right;

    z-index:999;

}



.ndiv ul

{

	list-style-type:none;

	background-color:White;

}



.ndiv ul li

{

	text-align:center;

	display: block;

}



.ndiv ul li:hover

{

	background-color:Gray;

}