我有一个带有大型菜单的 ASP .Net 网页。当我将鼠标悬停在菜单项上时,内容会下降,页面的内容会稍微向上移动,例如 2 或 3 个像素。当您离开菜单时,页面会向下移回其原始位置。
这是母版页和菜单的标记:
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div id="container">
<div id="header" class="header">
<div class="headerlogin">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
<div class="white">
[
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LoginText="Log In" />
]
</div>
</AnonymousTemplate>
<LoggedInTemplate>
<div class="white">
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>!|
<asp:LinkButton ID="EditAccount" runat="server" OnClick="EditAccount_Click">My Account</asp:LinkButton>
| [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" />
]
</div>
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="headercontent">
<asp:ImageButton AccessKey="H" ID="imageBranding" runat="server" AlternateText="Philadelphia City Branding Image"
ImageUrl="~/imgs/cityLogo.png" Style="margin-top: 8px;" OnClientClick="confirmation" />
<asp:ImageButton ID="imageLogo" runat="server" AlternateText="Logo" ImageUrl="~/imgs/LogoType.png" OnClientClick="confirmation" />
</div>
</div>
<div id="body" class="page">
<asp:Repeater ID="MainMenu" runat="server">
<HeaderTemplate>
<ul id="menu">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<%# Container.DataItem%>
</ItemTemplate>
</asp:Repeater>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" class="footer">
<div class="footerContent">
<div class="FooterMenu">
<asp:Label ID="AdditionalInfoLabel" runat="server" Text="Additional Information"></asp:Label><br />
<asp:LinkButton ID="LinkContacts" runat="server" Text="State and Local Agency Contacts" OnClientClick="aspnetForm.target ='_blank';"></asp:LinkButton><br />
<asp:LinkButton ID="LinkNotificationInstructions" runat="server" Text="Notification Instructions"></asp:LinkButton>
</div>
<div class="contact" >
<fieldset>
<legend>Contact</legend>
<p>
<asp:Label ID="Label2" runat="server" Text="Name:"></asp:Label><br />
<asp:TextBox ID="ContactName" runat="server" style="width:300px;"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label4" runat="server" Text="E-mail:"></asp:Label><br />
<asp:TextBox ID="ContactEmail" runat="server" style="width:300px;"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label3" runat="server" Text="Subject:"></asp:Label><br />
<asp:TextBox ID="ContactSubject" runat="server" style="width:300px;"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label5" runat="server" Text="Message:"></asp:Label><br />
<asp:TextBox ID="ContactMessage" runat="server" TextMode="MultiLine" Rows="10" Columns="35" style="resize:none;"></asp:TextBox>
</p>
<p>
<asp:Button ID="SubmitEmail" runat="server" Text="Submit" CssClass="jQueryButtons" Style="background-color:#133766;"/>
</p>
</fieldset>
</div>
</div>
<div class="footerlogin">
<div class="white">
<asp:Label ID="Label1" runat="server" Text="">© 2013 Public Health Management Corporation</asp:Label>
</div>
</div>
</div>
</div>
</form>
和一个典型的内容页面:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content">
<div class="loginDiv">
<PHMC:LogIn ID="LogIn1" runat="server" />
</div>
</div>
还有一些 CSS
内容:
.content
{
background: #edede4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .813em;
overflow: auto;
line-height: 1.125em;
margin: 0 auto;
min-height: 48em;
width: 100%;
}
超级菜单
#MainMenu
{
height: 100%;
}
#menu
{
background: #133766;
list-style: none;
height: 1.875em;
margin-top: .1em;
min-height: 1.875em;
width: 100%;
}
#menu li
{
border: 0;
float: left;
min-height: 1.4em;
padding: .25em .625em .25em .625em;
position: relative;
text-align: center;
}
#menu li:hover
{
background-color: #2872D2;
height: 1.35em;
}
#menu li a
{
color: #FFFFFF;
display: block;
font-size: .875em;
outline: .063em;
text-decoration: none;
}
.drop
{
background-image: url("../imgs/drop.png");
z-index: 999;
}
#menu li:hover a
{
color: #FFFFFF;
}
#menu li .drop
{
background: url("../imgs/drop.png") no-repeat right 0;
padding-right: 21px;
}
#menu li:hover .drop
{
background: url("../imgs/drop.png") no-repeat right 0;
}
/* Drop Down */
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, Fcon .dropdown_5columns
{
background-color: #FFFFFF;
float: left;
left: -999em;
margin: .15em auto;
padding: .625em .313em .625em .313em;
position: absolute;
text-align: left;
}
.dropdown_1column
{
width: 8.75em;
}
.dropdown_2columns
{
width: 17.5em;
}
.dropdown_3columns
{
width: 26.25em;
}
.dropdown_4columns
{
width: 35em;
}
.dropdown_5columns
{
width: 43.75em;
}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns
{
left: 0px;
top: auto;
}
/* Columns */
.col_1, .col_2, .col_3, .col_4, .col_5
{
display: inline;
float: left;
margin-left: .313em;
margin-right: .313em;
position: relative;
}
.col_1
{
width: 8.125em;
}
.col_2
{
width: 16.875em;
}
.col_3
{
width: 25.625em;
}
.col_4
{
width: 34.375em;
}
.col_5
{
width: 43.125em;
}
/* Right alignment */
#menu .menu_right
{
float: right;
margin-right: 0px;
}
#menu li .align_right
{
}
#menu li:hover .align_right
{
left: auto;
right: 0px;
top: auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li
{
font-size: .75em;
line-height: 1.8em;
text-align: left;
}
#menu h2
{
border-bottom: .063em solid #666666;
font-size: 1.313em;
font-weight: 400;
letter-spacing: -.063em;
margin: .438em 0 .875em 0;
padding-bottom: .875em;
}
#menu h3
{
border-bottom: .063em solid #888888;
font-size: .875em;
margin: .438em 0 .875em 0;
padding-bottom: .438em;
}
#menu p
{
line-height: 1.8em;
margin: 0 0 .625em 0;
}
#menu li:hover div a
{
color: #015b86;
font-size: .75em;
}
#menu li:hover div a:hover
{
color: #029feb;
}
.strong
{
font-weight: bold;
}
.italic
{
font-style: italic;
}
.imgshadow
{
background: #FFFFFF;
border: .063em solid #777777;
padding: .25em;
margin-top: .313em;
}
.img_left
{
/* Image sticks to the left */
float: left;
margin: .313em .938em .313em .313em;
width: auto;
}
#menu li .black_box
{
background-color: #333333;
color: #eeeeee;
padding: .25em .375em .25em .375em;
}
#menu li ul
{
list-style: none;
margin: 0 0 .75em 0;
padding: 0;
}
#menu li ul li
{
float: none;
font-size: .75em;
line-height: 1.5em;
margin: 0;
padding: 0;
position: relative;
text-align: left;
width: 8.125em;
}
#menu li ul li:hover
{
background: none;
border: none;
margin: 0;
padding: 0;
}
#menu li .greybox li
{
background: #F4F4F4;
border: 1px solid #bbbbbb;
margin: 0px 0px .25em 0px;
padding: .25em .375em .25em .375em;
width: 116px;
}
#menu li .greybox li:hover
{
background: #ffffff;
border: 1px solid #aaaaaa;
margin: 0px 0px .25em 0px;
padding: .25em .375em .25em .375em;
}