Currently, I am working on designing a master page for a website and running into a bit of trouble with a CSS3 dropdown menu in a .NET Web App. The specific issue I'm facing is related to the nav element not displaying a background color as intended. Although I have successfully implemented similar dropdown menus before without any problems, this project seems to be presenting some unexpected challenges.
Here's the markup code:
<%@ 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>
The CSS used:
/*------------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%);
background: -moz-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%);
background: -o-linear-gradient(top, #680000, Black);
}
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%);
background: -o-linear-gradient(top, #cccccc, #999999);
position: relative;
text-align: center;
}
.menu
{
text-align: center;
margin: auto%;
background-color: Silver;
}
...
<!-- Rest of the CSS code omitted for brevity -->
...
Your assistance will be greatly appreciated.