Question

我有一个带有超级菜单的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="">&copy; 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;
}

Answer 1

令人难以置信的是，问题在于身高。对于li，我使用的是最小高度设置，对于li：hover我只使用了普通的高度。

所以，是：

#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
{
border: 0;
float: left;
min-height: 1.4em;
padding: .25em .625em .25em .625em;
position: relative;
text-align: center;
}
#menu li:hover
{
background-color: #2872D2;
min-height: 1.35em;
}

Css导致页面跳转

1 个答案: