Css導致頁面跳轉

我有一個ASP .Net網頁與一個大菜單。當我將鼠標懸停在菜單項上，並且內容下降時，頁面內容稍微向上移動，就像2或3像素一樣。當您離開菜單時，頁面會回落到原來的位置。Css導致頁面跳轉

這裏是母版頁的標記和菜單：

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

來源

2013-08-22 Ethan Schofer

很難看到菜單做。你能否提供一些典型的菜單內容？我創建了一個小提琴，你可以填寫一些細節：http://jsfiddle.net/ZK9DX/ – VeeTheSecond

Riiiigggghhhht，因爲實際的菜單項來自數據庫。哎呀！所以，我更新了小提琴：http://jsfiddle.net/ZK9DX/2/，但當然它沒有這樣做，所以他頁面上的其他東西正在導致它發生。 –

有一些關於li裏面的div無效的討論。嘗試在本文的答案中提到的DOCTYPE標記：http://stackoverflow.com/questions/1915077/is-div-inside-list-allowed。如果失敗，請粘貼純香草html輸出。然後我可以在我的本地盒子上刺戳它。 – VeeTheSecond

Unbelieveably，問題與李的高度。對於李，我正在使用最小高度設置，而對於李：懸停我只是使用普通高度。

所以，是：

#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; 
}

來源

2013-08-29 21:04:29

Css導致頁面跳轉

回答

相關問題