javascript - 文本堆叠在自身之上

Question

我在一个网站上工作，该网站有一个菜单，其中所有文本都堆叠在自己身上。我不知道是什么原因造成的。如果我从它正确显示的页面剪切并粘贴菜单代码，它似乎会修复它，直到我对该页面进行任何其他更改然后它恢复回来。任何帮助将不胜感激!

What menu should look like

JSFIDDLE

HTML:

@charset "UTF-8";

/* CSS Document */

body {
  background-color: #e8d7a5;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}

#menuBack {
  background-image: url(../_images/GreenBackground.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
  z-index: 20;
}

#headerBack {
  background-image: url(../_images/BlueBackground.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#contentBack1 {
  background-image: url(../_images/TanBackground1.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
  z-index: 20;
}

#contentBack2 {
  background-image: url(../_images/TanBackground2.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#contentBack3 {
  background-image: url(../_images/TanBackground3.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#footerBack {
  background-image: url(../_images/GreenBackground.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#menu {
  margin: 0 auto;
  height: 60px;
  width: 1024px;
  z-index: 20;
}

#header {
  margin: 0 auto;
  height: 390px;
  width: 1024px;
}

#MainMenu {
  background-image: url(../_images/Menu.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 869px;
  height: 62px;
  position: relative;
  z-index: 20;
}

#MainMenu a {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  font-weight: lighter;
  color: #FFF;
  width: 170px;
  margin-top: 5px;
  float: left;
  position: relative;
}

h4 {
  font-size: 1em;
  margin-top: -50px;
  margin-left: 60px;
  position: absolute;
  font-weight: lighter;
}

h5 {
  font-size: .7em;
  position: absolute;
  margin-top: -30px;
  margin-left: 60px;
  font-weight: lighter;
}

#MainMenu a:hover {
  text-decoration: none;
}

#PageTitle {
  margin-left: 0px;
  margin-top: 0px;
  z-index: 200;
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  text-shadow: -2px 2px 1px #41523C;
  font-size: 6em;
  line-height: 1em;
  color: #fff;
  float: left;
  position: absolute;
  margin-top: 25px;
  margin-left: 15px;
}

#PageTitle b {
  font-size: .7em;
  line-height: 1em;
  text-shadow: -1px 1px 1px #41523C;
}

#Rotator {
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 10;
}

#Rotator img {
  box-shadow: 10px 0px 30px #495154;
  z-index: -2;
}

.shadow {
  box-shadow: -10px 0px 30px #495154;
}

#RotatorHome {
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 10;
}

#RotatorHome img {
  box-shadow: none;
}

#content {
  margin: 0 auto;
  height: auto;
  width: 1024px;
  z-index: 20;
}

#footer {
  margin: 0 auto;
  height: auto;
  width: 1024px;
}

#footer p {
  color: #fff;
  font-size: .8em;
}

#footer a {
  color: #e8d7a5;
  font-size: 1em;
}

#footer img {
  width: auto;
  height: 60px;
  margin-right: 10px;
}

@font-face {
  font-family: 'BreeSerifRegular';
  src: url(../_fonts/bree-serif/breeserif-regular-webfont.eot);
  src: url(../_fonts/bree-serif/breeserif-regular-webfont.eot?#iefix) format('embedded-opentype'), url(../_fonts/bree-serif/breeserif-regular-webfont.woff) format('woff'), url(../_fonts/bree-serif/breeserif-regular-webfont.ttf) format('truetype'), url(../_fonts/bree-serif/breeserif-regular-webfont.svg#BreeSerifRegular) format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cabin";
  src: url(../_fonts/cabin/Cabin-Regular.otf);
  /* IE */
  src: local("Cabin"), url(../_fonts/cabin/Cabin-Regular.otf) format("truetype");
  /* non-IE */
}

p {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  line-height: 1.8em;
  color: #5e533e;
  margin-bottom: 30px;
}

a {
  color: #759033;
  text-decoration: none;
  border: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  color: #43711d;
  font-size: 2em;
  margin-top: 0;
  text-shadow: -1px 1px 1px #41523C;
}

h2 {
  font-family: "Cabin", Helvetica, sans-serif;
  color: #5e533e;
  font-size: 1.2em;
  line-height: .5em;
}

#faqs h2 {
  line-height: 1.2em;
}

h2 a,
h2 a:hover {
  color: #5e533e;
}


/*-- CONTENT DIVS --*/

#LeftContent {
  width: 472px;
  padding-right: 20px;
  float: left;
}

#RightContent {
  width: 472px;
  padding-left: 20px;
  float: left;
}

#LeftContent ul,
#RightContent ul {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  line-height: 1.8em;
  color: #5e533e;
  text-decoration: none;
}

#QuickLinks {
  float: right;
  margin-right: 160px;
}

#QuickLinks ul {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  font-size: .9em;
  line-height: 1.5em;
  color: #5e533e;
  text-decoration: none;
}

#QuickLinks2 {
  float: right;
  margin-right: 160px;
}

#KidsCampSession {
  width: 1024px;
  height: 270px;
  float: left;
  clear: both;
  margin-bottom: 40px;
}

#session {
  background-image: url(../_images/program_orange.png);
  background-repeat: none;
  height: 216px;
  width: 302px;
}

#sessionV {
  background-image: url(../_images/program_orange_vertical.png);
  background-repeat: none;
  height: 302px;
  width: 216px;
}

#sessionP {
  float: left;
  width: 272px;
  height: 40px;
  margin-left: 30px;
  margin-top: 15px;
}

#session h3 {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  color: #e8d7a5;
  font-size: 1.7em;
  margin-top: 0;
  float: left;
  width: 100px;
  text-shadow: -1px 1px 1px #804e07;
}

#session p {
  float: right;
  width: 165px;
  height: 40px;
  color: #FFF;
  margin-top: 0px;
}

#LeftContent ul i,
#RightContent ul i,
#QuickLinks ul i {
  color: #759033;
  list-style: none;
}

#LeftContent li,
#RightContent li,
#QuickLinks li {
  list-style: none;
  margin-left: -30px;
}

#SocialMedia img {
  width: 40px;
  height: auto;
  margin-left: 2px;
}

#Fundraiser img {
  width: 40px;
  height: auto;
  margin-right: 2px;
}

#Fundraiser p {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  line-height: 1.8em;
  color: #5e533e;
  text-decoration: none;
}

#LeftContent table {
  width: 100%;
  padding: 15px;
  border-spacing: 15px;
  color: #5e533e;
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
}

#LeftContent table th {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  color: #43711d;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="icon" type="image/ico" href="../favicon.ico">

  <title>Killarney Lutheran Camp</title>

  <link href="../_CSS/_style.css" rel="stylesheet" type="text/css" />

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    // BeginOAWidget_Shared_2241022
    google.load("mootools", "1.2.1");
    // EndOAWidget_Shared_2241022
  </script>

  <script src="../js/MenuMatic_0.68.3.js" type="text/javascript"></script>

  <!-- BELOW JAVASCRIPT IS FOR MID PAGE MENU -->
  <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i, x, a = document.MM_sr;
      for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
    }

    function MM_preloadImages() { //v3.0
      var d = document;
      if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length,
          a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
          if (a[i].indexOf("#") != 0) {
            d.MM_p[j] = new Image;
            d.MM_p[j++].src = a[i];
          }
      }
    }

    function MM_findObj(n, d) { //v4.01
      var p, i, x;
      if (!d) d = document;
      if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
        d = parent.frames[n.substring(p + 1)].document;
        n = n.substring(0, p);
      }
      if (!(x = d[n]) && d.all) x = d.all[n];
      for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
      for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
      if (!x && d.getElementById) x = d.getElementById(n);
      return x;
    }

    function MM_swapImage() { //v3.0
      var i, j = 0,
        x, a = MM_swapImage.arguments;
      document.MM_sr = new Array;
      for (i = 0; i < (a.length - 2); i += 3)
        if ((x = MM_findObj(a[i])) != null) {
          document.MM_sr[j++] = x;
          if (!x.oSrc) x.oSrc = x.src;
          x.src = a[i + 2];
        }
    }
  </script>

  <link href="../_CSS/MenuMatic.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    /* BeginOAWidget_Instance_2241022: #nav */
  </style>

  <!-- <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-30103314-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script> -->
</head>

<body onload="MM_preloadImages('../_images/MenuBottonH_Beliefs.png','../_images/MenuBottonH_History.png','../_images/MenuBottonH_Involved.png','../_images/KillarneyLogoGreenHover.png')">
  <div id="menuBack">
    <div id="menu">
      <a href="../index.html"><img id="Home" style="width: 60px; height: auto;" src="../_images/KillarneyLogoGreenNoText.png" alt="Home" width="200" name="Home" border="0" /></a>
      <div style="width: 1024px;">
        <ul id="nav" style="width: 550px; margin-left: 500px; position: absolute;">
          <li><a href="../summercamp/index.html">Summer Camp</a>
            <ul>
              <li><a href="../summercamp/theme/index.html">Theme</a></li>
              <li><a href="../summercamp/index.html">Programs</a>
                <ul>
                  <li><a href="../summercamp/index.html">Programs</a></li>
                  <li><a href="../summercamp/mission/index.html">Mission</a></li>
                  <li><a href="../summercamp/director/index.html">Director Chat</a></li>
                  <li><a href="../summercamp/faqs/index.html">FAQ's</a></li>
                  <li><a href="../summercamp/wishlist/index.html">Wishlist</a></li>
                </ul>
              </li>
              <li><a href="../summercamp/register/index.html">Register</a></li>
              <li><a href="../summercamp/jobs/index.html">Jobs</a></li>
              <!-- <li><a href="http://www.killarneycamp.blogspot.com/" target="_blank">Killarney Blog</a></li> -->
            </ul>
          </li>
          <li><a href="../campground/index.html">Campground</a>
            <ul>
              <li><a href="../campground/index.html">About</a></li>
              <li><a href="../campground/fees/index.html">Camping Fees</a></li>
              <li><a href="../campground/boosters/index.html">Boosters &amp; Membership</a></li>
            </ul>
          </li>
          <li><a href="../programs/index.html">Programs</a>
            <ul>
              <li><a href="../programs/index.html">School Field Trips</a></li>
              <li><a href="../programs/groups/index.html">Groups &amp; Rentals</a></li>
              <li><a href="../programs/fees/index.html">Program Fees</a></li>
            </ul>
          </li>
          <li><a href="../events/index.html">Special Events</a>
            <ul>
              <li><a href="../events/index.html">Calendar</a></li>
              <li><a href="../events/index.html#Events">Annual Events</a>
                <ul>
                  <li><a href="../events/funrun">Fun Run</a></li>
                  <li><a href="../events/index.html#SpringWorkBee">Spring Work Bee</a></li>
                  <li><a href="../events/index.html#MemorialDayBBQ">Memorial Day Chicken BBQ</a></li>
                  <li><a href="../events/index.html#OpenHouse">Summer Camp Open House</a></li>
                  <li><a href="../summercamp/index.html#SummerCamp">Summer Camp</a></li>
                  <li><a href="../events/index.html#PigRoast">Pig Roast</a></li>
                  <li><a href="../events/index.html#PioneerCampOut">Pioneer Archery Camp-Out</a></li>
                  <li><a href="../events/index.html#FallFest">Fall Fest</a></li>
                  <li><a href="../events/index.html#FallWorkBee">Fall Work-Bee</a></li>
                  <li><a href="../events/index.html#AnnualBoardMeeting">Board Meeting of LCA</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- BELOW JAVASCRIPT IS FOR TOP HORIZONTAL MENU -->
      <script type="text/javascript">
        // <![CDATA[
        // BeginOAWidget_Instance_2241022: #nav


        window.addEvent('domready', function() {
          var myMenu = new MenuMatic({
            id: "nav",
            effect: "slide & fade",
            duration: "600",
            hideDelay: "1000",
            matchWidthMode: "false",
            orientation: "horizontal",
            direction: {
              x: 'right',
              y: 'down'
            },
            opacity: 95
          });
        });

        // EndOAWidget_Instance_2241022
        // ]]>
      </script>
    </div>
  </div>
  <div id="headerBack">
    <div id="header">
      <div id="PageTitle">Camp<br />Killarney</div>
      <div id="Rotator" class="shadow"><img src="_images/KillarneyCross.png" alt="Killarney_Cross" /></div>
    </div>
  </div>
  <div id="contentBack1">
    <div id="MainMenu">
      <a style="margin-left: 10px;" href="../../beliefs/index.html"><img id="Beliefs" src="../../_images/MenuButton_Beliefs.png" alt="Beliefs" width="54" height="53" name="Beliefs" border="0" /></a>
      <h4>our beliefs</h4>
      <h5>the firm foundation for our camp</h5>
      <a href="../../history/index.html"><img id="History" src="../../_images/MenuButton_History.png" alt="History" width="54" height="53" name="History" border="0" /></a>
      <h4>history</h4>
      <h5>explore where we came from</h5>
      <a href="../../involve/index.html"><img id="Involved" src="../../_images/MenuButton_Involved.png" alt="Get Involved" width="54" height="53" name="Involved" border="0" /></a>
      <h4>get involved</h4>
      <h5>volunteer at camp</h5>
      <a href="../../congregations/index.html"><img id="Churches" src="../../_images/MenuButton_Churches.png" alt="Member Congregations" width="54" height="53" name="Congregations" border="0" /></a>
      <h4>lutheran</h4>
      <h5>campsite association</h5>
      <a href="../../contact/index.html"><img id="Contact" src="../../_images/MenuButton_Contact.png" alt="Contact &amp; Map" width="54" height="53" name="Contact" border="0" /></a>
      <h4>contact</h4>
      <h5>&amp; see directions</h5>
    </div>
    <div id="content">
      <div id="QuickLinks">
        <div id="SocialMedia" style="margin-top: 0px;">
          <a href="http://facebook.com/KillarneyLutheranCamp" target="_blank"><img src="../_images/SocialMedia/facebook2.png" alt="" /></a>
          <a href="http://www.goodsearch.com/nonprofit/camp-killarney-lutheran-campsite-association.aspx" target="_blank"><img src="../_images/SocialMedia/GoodSearch2.png" alt="" /></a>
        </div>
      </div>
      <p>&nbsp;</p>
      <div id="LeftContent">
        <h1 style="text-align: center;">&nbsp;</h1>
        <h1>SUMMER CAMP 2018</h1>
        <h2><a href="summercamp/index.html">2018 Summer Camp Dates Coming Soon!</a></h2>
      </div>
      <div id="RightContent"><br />
        <h2><a href="summercamp/index.html">Our Program</a></h2>
        <p>Camp Killarney offers a variety of exciting resident summer camp programs for youth ages PK-12th grade. All programs are carefully designed to meet the needs of your camper and our mission. We are licensed by the State of Michigan and our Camp
          Director is certified by the American Camp Association (ACA).</p>
        <p>We offer your camper both traditional and choice activities. Daily programs offer a safe awesome outdoor experience with plenty of room to explore. Campers also enjoy our bunkhouse style cabins, dining hall, craft &amp; nature cabin, sand volleyball
          court, activity pavillion, outdoor chapel, health center, shower house, archery range, beach/swim area, hiking trails, field sports area, superb staff, and more! Seasons of campers have enjoyed &ldquo;Killarney Green Thing&rdquo;, &ldquo;Big
          Foot&rdquo;, &ldquo;Mt. Sinai&rdquo;, &ldquo;Bubba&rdquo;, &ldquo;Kidron Valley&rdquo;, &ldquo;The Blue Heron&rdquo;, &ldquo;The Campfire&rdquo;, and more..!</p>
        <p>Learn more... <a style="margin-left: 30px;" href="summercamp/mission/index.html">our mission</a> <a style="margin-left: 30px;" href="summercamp/director/index.html">chat with the director</a></p>
      </div>
      <p>
        <!-- TemplateEndEditable -->
      </p>
    </div>
    <div id="contentBack2">
      <div id="content">
        <p>
          <!-- TemplateBeginEditable name="Content2" -->
        </p>
        <h1>CAMPGROUND</h1>
        <div id="LeftContent">
          <h2><a href="campground/index.html">About the Camp</a></h2>
          <p>Killarney Lutheran Camp is located on the shores of Killarney Lake, and is operated by an association of WELS congregations in support of our Children's Summer Camps. We invite you to come and enjoy God's great outdoors in a family-friendly
            Christian atmosphere in the beautiful Irish Hills. To learn more, go <a href="campground/index.html">here...</a></p>
          <br />
          <h2><a href="campground/index.html">2017 Dates</a></h2>
          <p>The Campground is open from <em style="color: #759033;">May 1st to the last weekend in October</em>.<br />Off season camping may be available by reservation only.</p>
          <p>
            <a style="color: #ca7e11;" href="campground/fees/index.html"><img style="margin-bottom: -5px;" src="_images/arrow.png" alt="arrow" /><strong>Camping rates</strong></a>.</p>
        </div>
        <div id="RightContent">
          <a href="campground/boosters/index.html"><img src="_images/boosters.png" alt="boosters" /></a> <br /><br />
          <h2><a href="campground/boosters/index.html">Boosters</a></h2>
          <p>Save money and support our camp programs by becoming a Booster Member. Annual Booster Memberships are available to offset camping and day use fees.</p>
        </div>
        <p>
          <!-- TemplateEndEditable -->
        </p>
      </div>
    </div>
    <div id="contentBack3">
      <div id="content">
        <!-- TemplateBeginEditable name="Content3" -->
        <h1>Programs</h1>
        <div id="LeftContent">
          <h2><a href="programs/index.html">School Programs</a></h2>
          <p>Learn more about Killarney&rsquo;s field trip opportunities for schools. Get the details <a href="programs/index.html">here...</a></p>
          <br />
          <h2><a href="programs/index.html">Groups &amp; Rentals</a></h2>
          <p>Groups can rent out parts of the camp.<br /> <a href="programs/groups/index.html">Click here for plans</a></p>
          <p>
            <a href="programs/fees/index.html"><img style="margin-bottom: -5px;" src="_images/arrow.png" alt="arrow" /> <strong>Program fees</strong></a>
          </p>
        </div>
        <div id="RightContent">
          <a href="campground/2017_Main_Brochure_REVISED.pdf" target="_blank"><img src="_images/brochure.png" alt="brochure" /></a> <br /><br />
          <h2><a href="summercamp/register/2014MainBrochure.doc" target="_blank">Download Promotional Items</a></h2>
          <p>Promote Camp Killarney at your congregation, school, or business today! Download the <a href="summercamp/register/Summer_Camp_2017.pdf" target="_blank">Summer Camp brochure</a>, the <a href="programs/OutdoorEdBrochureKLC.pdf" target="_blank">programs brochure</a>,
            or the <a href="campground/2017_Main_Brochure_REVISED.pdf" target="_blank">campground brochure</a>.</p>
        </div>
        <!-- TemplateEndEditable -->
      </div>
    </div>
    <div id="footerBack">
      <div id="footer">
        <div id="LeftContent">
          <p>Camp Killarney is affiliated with the <a href="http://www.wels.net" target="_blank">WELS</a> and <a href="http://www.evangelicallutheransynod.org" target="_blank">ELS</a>
            <a href="http://www.wels.net" target="_blank"><img src="../_images/WELS.png" alt="" /></a>
            <a href="http://www.evangelicallutheransynod.org" target="_blank"><img src="../_images/ELS.png" alt="" /></a> <br /><br /></p>
          <div id="copyright" style="margin-top: -18px;">
            <p>Copyright � 2012 Killarney Lutheran Camp | Site design by <a href="http://www.jeffhendrix.com" target="_blank">Jeffrey Hendrix</a></p>
          </div>
        </div>
        <div id="RightContent">
          <p>Check out some other <a href="http://www.camplor-ray.org" target="_blank">Lutheran Camps</a>
            <a href="http://www.camplor-ray.org" target="_blank"><img src="../_images/Lor-Ray.png" alt="" /></a>
            <a href="http://www.killarneycamp.org"><img src="../_images/KillarneySmall.png" alt="" /></a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

问题出在您的 CSS 中。 position: absolute 为您的 h4 和 h5 元素设置，但您没有任何 top，right、bottom 或 left 属性集。这使他们都在同一个地方。你的上边距和左边距也移动了一点，但仍然都在同一个地方。

我猜想您实际上想将它们的位置设置为relative(相对于它们的容器)并从那里进行调整，但这取决于您希望菜单的外观。