0

我正在为网站创建母版页并尝试在 .NET Web 应用程序中使用 CSS3 下拉菜单。我遇到的问题是我无法让导航元素显示背景颜色。我之前已经实施过几次,没有任何问题,但由于某种原因,它在这个项目中不起作用。

标记:

<%@ 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;
}

感谢您的帮助。

4

2 回答 2

2

您的导航无法计算任何宽度,因为其中的所有元素都没有宽度,这就是它无法显示任何背景的原因

于 2012-11-21T03:47:31.537 回答
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;
}

演示

于 2012-11-21T06:06:32.773 回答