在一个div中，如果加入一个图片对象，而不是背景图片，它下面还有一个div，这样可以把内容显示在顶部，如果是背景图像，就不能显示在顶部。下面的代码中div还要做调整。
下面加粗的代码说明了这种处理办法，而且需要微调，在各个浏览器中很兼容。
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" EnableTheming="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
html
{
/*text-align:center; */
background-image:url("kcimages/bj.jpg")
}
</style>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
img{border:0 none;}
.box{}
/*主导航菜单*/
#nav-menu{height:40px;width:873px;margin:0 auto;padding-top:50px}
#nav-menu .container{position:relative;overflow:visible; z-index:99;}
#nav-menu .menu{padding:0 0 0 14px;}
#nav-menu .menu li{position:relative;float:left;padding:0 8px 0 5px;display:inline;font-size:14px;}
#nav-menu .menu li h3{font-weight:normal;display:inline-block;float:left;}
#nav-menu .menu li a.xialaguang{margin-top:10px;display:inline-block;color:#FFF;height:30px;text-decoration:none;font-size:14px;width:100px;text-align:center;}
#nav-menu .menu li a.selected,#nav-menu .menu li a.navhover,#nav-menu .menu li a.xialaguang:hover{color:#1a529c;}
#nav-menu .menu li a.navhover, #nav-menu .menu li a.xialaguang:hover{}
#nav-menu .menu li a.xialaguang span{height:30px;line-height:25px;display:inline-block;font-weight:bold;}
#nav-menu .menu li a.selected span,#nav-menu .menu li a.navhover span,#nav-menu .menu li a.xialaguang:hover span{cursor:pointer;}
#nav-menu .menu li a.navhover span, #nav-menu .menu li a.xialaguang:hover span{width:100px;}
#nav-menu .menu ul.children{display:none;position:absolute;top:40px;left:3px;width:100px;background:#FFF;border:2px solid #1a529c;border-top:0;line-height:normal;}
#nav-menu .menu ul.children li{width:100px;padding:0px;display:inline-block;font-size:12px;border-top:1px solid #ccc;}
#nav-menu .menu ul.children li h3{display:block; width:100%;}
#nav-menu .menu ul.children li a{width:100%;height:16px;line-height:16px;overflow:hidden;padding:3px 0;display:block;color:#1a529c;text-align:center;
text-decoration:none; font-size:12px;}
#nav-menu .menu ul.children li a:hover{text-decoration:none;}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="ymdiv" style="width:873px; margin-left:auto;margin-right:auto">
<div id="mbydiv" style="width:873px;height:165px;margin:auto">
<div><img src="kcimages/logo.jpg" alt="" width="873px" height="165px" /></div>
<!-logo部分，菜单部分->
<div id="cddiv" style="width:873px;height:50px;margin-top:-155px;padding-top:8px "></div>
<div class="box">
<div id="nav-menu">
<ul class="menu">
<li class="stmenu" style="width:140px;padding-right:10px"><h3 style="width:140px;padding-right:10px"><a href="kcfl.aspx?id=1" class="xialaguang" style="width:140px;padding-right:10px"><span style="width:140px;padding-right:10px">课程基地建设概况</span></a></h3></li>
<li class="stmenu" style="width:140px;padding-right:10px"><h3 style="width:140px;padding-right:10px"><a href="kcfl.aspx?id=2" class="xialaguang" style="width:140px;padding-right:10px"><span style="width:140px;padding-right:10px">教学成果研究和推广</span></a></h3></li>
<li class="stmenu" style="width:140px;padding-right:10px"><h3 style="width:140px;padding-right:10px"><a href="kcfl.aspx?id=3" class="xialaguang" style="width:140px;padding-right:10px"><span style="width:140px;padding-right:10px">个性化课程孵化温室</span></a></h3></li>
<li class="stmenu" style="width:100px;padding-right:10px"><h3 style="width:100px;padding-right:10px"><a href="kcfl.aspx?id=4" class="xialaguang" style="width:100px;padding-right:10px"><span style="width:100px;padding-right:10px">教师培训摇篮</span></a></h3></li>
<li class="stmenu" style="width:100px;padding-right:10px"><h3 style="width:100px;padding-right:10px"><a href="kcfl.aspx?id=5" class="xialaguang" style="width:100px;padding-right:10px"><span style="width:100px;padding-right:10px">精英团队</span></a></h3></li>
<li class="stmenu" style="width:100px;padding-right:10px"><h3 style="width:100px;padding-right:10px"><a href="kcfl.aspx?id=6" class="xialaguang" style="width:100px;padding-right:10px"><span style="width:100px;padding-right:10px">学生活动</span></a></h3></li>
</ul>
</div>
</div>
</div>
<div id="xxydiv" style="width:873px;height:787px">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footdiv" style="width:873px;height:96px">
</div>
</div>
<script type="text/javascript" src="jqscript/jquery.js"></script>
<script type="text/javascript">
$('#nav-menu .menu > li').hover(function () {
$(this).find('.children').animate({ opacity: 'show', height: 'show' }, 200);
$(this).find('.xialaguang').addClass('navhover');
}, function () {
$('.children').stop(true, true).hide();
$('.xialaguang').removeClass('navhover');
});
</script>
</form>
</body>
</html>
