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/, но, конечно, ее не делаю, поэтому что-то еще на его странице вызывает это. –

Были разговоры о том, что div внутри ли недействителен. Попробуйте использовать тег DOCTYPE, упомянутый в ответе на эту статью: http://stackoverflow.com/questions/1915077/is-div-inside-list-allowed. Если это не удастся, вставьте вывод html с простым ванилом. Тогда я могу нанести удар в моем местном ящике. – VeeTheSecond

Unbelieveably, проблема была с высотой Ли. Для li я использовал настройку min-height, а для 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; 
}

источник

2013-08-29 21:04:29

Css, вызывающий страницу для перехода

ответ

Смежные вопросы