我正在为网站创建母版页并尝试在.NET Web App中使用CSS3下拉菜单。我遇到的麻烦是我无法让nav元素显示背景颜色。我之前已经多次实现过没有问题，但由于某种原因它在这个项目中不起作用。
标记：
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MirandasWebsite.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="Styles/Mir3.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type='text/javascript'></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<title></title>
</head>
<body runat="server">
<form id="form1" runat="server" method="post">
<div class="wrap">
<nav>
<ul class="menu">
<div id="HomePage" class="zoom" runat="server"><li class="menuitem"><a href="Default.aspx" id="aDefault" runat="server">Home</a></li></div>
<li class="menuitem"><a id="aMedia" href="#" runat="server">Media</a>
<ul>
<div id="Photos" class="zoom" runat="server"><li class="menuitem"><a href="#" id="aPhotos" runat="server">Photos</a></li></div>
<asp:HiddenField ID="hfPhotos" runat="server" Value="#" />
<div id="Videos" class="zoom" runat="server"><li class="menuitem"><a href="#" id="aVideos" runat="server">Videos</a></li></div>
<asp:HiddenField ID="hfVideos" runat="server" Value="#" />
<div id="Audio" class="zoom" runat="server"><li class="menuitem"><a href="#" id="aAudio" runat="server">Audio</a></li></div>
<asp:HiddenField ID="hfAudio" runat="server" Value="#" />
</ul>
</li>
<li class="menuitem"><a id="a1" href="#" runat="server">About Me</a>
<ul>
<div id="Biography" class="zoom" runat="server"><li class="menuitem"><a href="#" id="aBiography" runat="server">Biography</a></li></div>
<asp:HiddenField ID="hfBiography" runat="server" Value="#" />
<div id="Resume" class="zoom" runat="server"><li class="menuitem"><a href="#" id="aResume" runat="server">Resume</a></li></div>
<asp:HiddenField ID="hfResume" runat="server" Value="#" />
</ul>
</li>
<div id="ContactMe" class="zoom" runat="server"><li class="menuitem"><a id="a2" href="#" runat="server">Contact Me</a></li></div>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<div class="Contents">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
CSS：
/*------------Main Styles------------*/
html
{
height: 100%;
width: 100%;
}
body
{
position: relative;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
background: -webkit-radial-gradient(center, circle farthest-corner, #680000 0%, Black 100%); /* for Chrome and Safari*/
background: -moz-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%); /* for Firefoex */
background: -ms-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%); /* For IE10 */
background: -o-linear-gradient(top, #680000, Black); /* For Opera */
}
ul
{
list-style: none;
}
/*------------Drop Down Menu------------*/
.wrap
{
max-width: 100%;
margin: 4em auto;
}
nav
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
position: relative;
text-align: center;
}
.menu
{
text-align: center;
margin: auto%;
background-color: Silver;
}
.menu li
{
float: left;
position: relative;
padding: 0% 1%;
}
.menu li a
{
color: #cccccc;
display: block;
font-size: 110%;
line-height: 100%;
padding: 0% 0%;
margin: 0% 0%;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
color: #222;
}
/* Dropdown styles */
.menu ul
{
position: absolute;
list-style: none;
opacity: 0;
-webkit-transition: opacity 1.5s ease;/*For Chrome and Safari */
-moz-transition: opacity 1.5s ease;/* For Firefox */
-o-transition: opacity 1.5s ease;/*For Opera */
min-width: 75%;
text-align: left;
}
.menu ul li
{
float: none;
}
.menu ul a
{
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul
{
background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc));
background: -moz-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%);
background: -o-linear-gradient(top, #999999, #cccccc); /* For Opera */
background: -ms-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%); /* For IE10 */
left: 5%;
opacity: .8;
text-align: center;
margin: auto;
min-width: 100%;
min-height: 100%;
}
/* Persistant Hover State */
.menu li:hover a
{
background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc));/* for Chrome and Safari */
background: -moz-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%);/* For Firefox */
background: -ms-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%); /* For IE10 */
background: -o-linear-gradient(top, #999999, ##cccccc); /* For Opera */
color: Black;
}
.menu li:hover ul a
{
background: none;
border-radius: 0%;
box-shadow: none;
}
.menu li:hover ul li a:hover
{
color: #680000;
}
感谢您的帮助。
答案 0 :(得分：2)
你的导航无法计算任何宽度，因为其中的所有元素都没有宽度，这就是为什么它不能显示任何背景
答案 1 :(得分：0)
只需将height属性提供给nav元素： -
<强> CSS
nav
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
position: relative;
text-align: center;
height:30px;
}
<强> DEMO