title: Css causing page to jump
body: <p>I have an ASP .Net web page with a mega menu. When I hover over a menu item, and the content drops down, the contents of the page moves up, slightly, like maybe 2 or 3 pixels. when you move away from the menu, the page moves back down to its original position.</p>
  
  <p>Here is the markup for the master page and the menu:</p>
  
  <pre><code>&lt;body&gt;
  &lt;form runat="server"&gt;
  &lt;asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"&gt;
  &lt;/asp:ScriptManager&gt;
  &lt;div id="container"&gt;
      &lt;div id="header" class="header"&gt;
          &lt;div class="headerlogin"&gt;
              &lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                  &lt;AnonymousTemplate&gt;
                      &lt;div class="white"&gt;
                          [
                          &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LoginText="Log In" /&gt;
                          ]
                      &lt;/div&gt;
                  &lt;/AnonymousTemplate&gt;
                  &lt;LoggedInTemplate&gt;
                      &lt;div class="white"&gt;
                          Welcome &lt;span class="bold"&gt;
                              &lt;asp:LoginName ID="HeadLoginName" runat="server" /&gt;
                          &lt;/span&gt;!|
                          &lt;asp:LinkButton ID="EditAccount" runat="server" OnClick="EditAccount_Click"&gt;My Account&lt;/asp:LinkButton&gt;
                          | [
                          &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" /&gt;
                          ]
                      &lt;/div&gt;
                  &lt;/LoggedInTemplate&gt;
              &lt;/asp:LoginView&gt;
          &lt;/div&gt;
          &lt;div class="headercontent"&gt;
              &lt;asp:ImageButton AccessKey="H" ID="imageBranding" runat="server" AlternateText="Philadelphia City Branding Image"
                  ImageUrl="~/imgs/cityLogo.png" Style="margin-top: 8px;" OnClientClick="confirmation" /&gt;
              &lt;asp:ImageButton ID="imageLogo" runat="server" AlternateText="Logo" ImageUrl="~/imgs/LogoType.png" OnClientClick="confirmation" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="body" class="page"&gt;
          &lt;asp:Repeater ID="MainMenu" runat="server"&gt;
              &lt;HeaderTemplate&gt;
                  &lt;ul id="menu"&gt;
              &lt;/HeaderTemplate&gt;
              &lt;FooterTemplate&gt;
                  &lt;/ul&gt;
              &lt;/FooterTemplate&gt;
              &lt;ItemTemplate&gt;
                  &lt;%# Container.DataItem%&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:Repeater&gt;
          &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"&gt;
          &lt;/asp:ContentPlaceHolder&gt;
      &lt;/div&gt;
      &lt;div id="footer" class="footer"&gt;
          &lt;div class="footerContent"&gt;
              &lt;div class="FooterMenu"&gt;
                  &lt;asp:Label ID="AdditionalInfoLabel" runat="server" Text="Additional Information"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                  &lt;asp:LinkButton ID="LinkContacts" runat="server"  Text="State and Local Agency Contacts" OnClientClick="aspnetForm.target ='_blank';"&gt;&lt;/asp:LinkButton&gt;&lt;br /&gt;
                  &lt;asp:LinkButton ID="LinkNotificationInstructions" runat="server"  Text="Notification Instructions"&gt;&lt;/asp:LinkButton&gt;
              &lt;/div&gt;
              &lt;div class="contact" &gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Contact&lt;/legend&gt;
                      &lt;p&gt;
                          &lt;asp:Label ID="Label2" runat="server" Text="Name:"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                          &lt;asp:TextBox ID="ContactName" runat="server" style="width:300px;"&gt;&lt;/asp:TextBox&gt;
                      &lt;/p&gt;
                      &lt;p&gt;
                          &lt;asp:Label ID="Label4" runat="server" Text="E-mail:"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                          &lt;asp:TextBox ID="ContactEmail" runat="server" style="width:300px;"&gt;&lt;/asp:TextBox&gt;
                      &lt;/p&gt;
                      &lt;p&gt;
                      &lt;asp:Label ID="Label3" runat="server" Text="Subject:"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                          &lt;asp:TextBox ID="ContactSubject" runat="server" style="width:300px;"&gt;&lt;/asp:TextBox&gt;
                      &lt;/p&gt;
                      &lt;p&gt;
                          &lt;asp:Label ID="Label5" runat="server" Text="Message:"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                          &lt;asp:TextBox ID="ContactMessage" runat="server" TextMode="MultiLine" Rows="10" Columns="35" style="resize:none;"&gt;&lt;/asp:TextBox&gt;
                      &lt;/p&gt;
                      &lt;p&gt;
                          &lt;asp:Button ID="SubmitEmail" runat="server" Text="Submit" CssClass="jQueryButtons" Style="background-color:#133766;"/&gt;
                      &lt;/p&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="footerlogin"&gt;
              &lt;div class="white"&gt;
                  &lt;asp:Label ID="Label1" runat="server" Text=""&gt;&amp;copy; 2013 Public Health Management Corporation&lt;/asp:Label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>And a typical content page:</p>
  
  <pre><code>&lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
  &lt;div class="content"&gt;
      &lt;div class="loginDiv"&gt;
          &lt;PHMC:LogIn ID="LogIn1" runat="server" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And some CSS</p>
  
  <p>content:</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>The mega menu</p>
  
  <pre><code>#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;
  }
  </code></pre>