在给body应用背景图后，菜单按钮的背景被覆盖了，如下所示。我希望菜单按钮能够保持可见性。
以下是图片链接 http://s11.postimage.org/4ndla4hxf/111111111.jpg
/********markup********/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li >@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
/*******body***********/
body
{
font-size: .85em;
font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
background-image:url('/Content/bw.jpg');
}
/*******menu**********/
#menu
{
position:relative;
float:left;
clear:left;
margin-right:50px;
}
#menu li
{
list-style-type: none;
padding: 0px;
display: block;
width:150px;
overflow:visible;
}
#menu li a
{
overflow:visible;
background: rgba(0,0,0,0.2);
text-shadow: 0px 0px 1px white;
color: white;
text-decoration: none;
font-size: 13px;
display: block;
font-family: arial;
text-transform: uppercase;
text-shadow: 0px 0px 5px #eee;
padding:10px 20px 10px;
margin: 5px;
font-weight: bold;
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#menu li a:hover
{
opacity: 1;
color:White;
background:#FF00D0 ;
text-shadow: 0px 0px 1px #ffffff;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
#menu li a:active {
background: rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}