css - 奇怪的 CSS 和 HTML 下拉菜单故障重叠

Question

出于某种原因，我遇到了一个奇怪的重叠下拉菜单故障。当我用 Firefox 打开它时它工作正常，但是当我将 HTML 发布到 Blogger.com 网站时，它重叠了。

我要更新到的网站是 http://clubpenguinspin.com/ ，如您所见，当您将鼠标悬停在“聊天”上时，它有如此多的选择和奇怪的重叠菜单。这是它的图片:

http://prntscr.com/aopk4

看看我的 HTML:

<center>
<!-- Link to styles used for our Navigation Bar -->
<link href="http://cpspintest123.x10.mx/nav-id-19fnroex/tea.css" rel="stylesheet" type="text/css" />

<!-- Link to a file with couple simple JavaScript functions used for our Navigation Bar -->
<script src="http://cpspintest123.x10.mx/nav-id-19fnroex/SimpleNavBarScripts.js" language="JavaScript" type="text/javascript"></script>


<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the next <a> tag,
      to avoid leaving a gap between each menu title and the next one. -->

<!-- REPLACE each "placeholder.html" URL below with the specific page you want the user
      to go to when the given menu title is clicked. For example, the first link below
      is for the "Home" menu title, so you'd probably replace the first URL with index.html. -->

<div class="mynavbar">

<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
      onmouseout="HideItem('products_submenu');" 
      onmouseover="ShowItem('products_submenu');"
    >Home<a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
      onmouseout="HideItem('services_submenu');" 
      onmouseover="ShowItem('services_submenu');"
    >Chat<a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
      onmouseout="HideItem('funstuff_submenu');" 
      onmouseover="ShowItem('funstuff_submenu');"
    >Twitter<a class="navbartitle" id="t4" href="#"
      onmouseout="HideItem('aboutus_submenu');" 
      onmouseover="ShowItem('aboutus_submenu');"
    >Extras<a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
      onmouseout="HideItem('contact_submenu');" 
      onmouseover="ShowItem('contact_submenu', 't5');"
    >Support</a>
<a class="navbartitle" id="t6" href="#"
      onmouseout="HideItem('yeaman_submenu');" 
      onmouseover="ShowItem('yeaman_submenu');"
    >Coming Soon

<!-- Products sub-menu, shown as needed  -->
<div class="submenu" id="products_submenu" 
    onmouseover="ShowItem('products_submenu');" 
    onmouseout="HideItem('products_submenu');">
  <div class="submenubox">
  </div>
</div>

<!-- Services sub-menu, shown as needed  -->
<div class="submenu" id="services_submenu" 
    onmouseover="ShowItem('services_submenu');" 
    onmouseout="HideItem('services_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="http://xat.com/clubpenguincheatzone" class="submenlink">CPCheatZone Chat</a></li>
      <li><a href="http://xat.com/noeexclusives" class="submenlink">NoeExclusives Chat</a></li>
      <li><a href="http://xat.com/cprichnich" class="submenlink">TheCpWorld Chat</a></li>
      </ul>
  </div>
</div>

<!-- Fun Stuff sub-menu, shown as needed  -->
<div class="submenu" id="funstuff_submenu" 
    onmouseover="ShowItem('funstuff_submenu');" 
    onmouseout="HideItem('funstuff_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="http://twitter.com/#!/cpcheatzone" class="submenlink">CPCheatZone</a></li>
      <li><a href="http://twitter.com/#!/444ppenguincp" class="submenlink">444ppenguin</a></li>
      <li><a href="http://twitter.com/#!/noe231cp" class="submenlink">Noe231</a></li>
      <li><a href="http://twitter.com/#!/cprichnich" class="submenlink">Rich Nich</a></li>
      <li><a href="http://twitter.com/#!/wastermcdude" class="submenlink">Master Swamp</a></li>
    </ul>
  </div>
</div>

<!-- About Us sub-menu, shown as needed  -->
<div class="submenu" id="aboutus_submenu" 
    onmouseover="ShowItem('aboutus_submenu');" 
    onmouseout="HideItem('aboutus_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="http://www.clubpenguinspin.com/p/freebies.html" class="submenlink">Freebies</a></li>
      <li><a href="#" class="submenlink">Graphics Store</a></li>
      <li><a href="http://youtube.com/cpcheatzone" class="submenlink">Club Penguin Cheats</a></li>
      <li><a href="#" class="submenlink">Fun</a></li>
      <li><a href="#" class="submenlink">More coming soon!</a></li>
     </ul>
  </div>
</div>

<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed  -->
<div class="submenu" id="contact_submenu" 
    onmouseover="ShowItem('contact_submenu');" 
    onmouseout="HideItem('contact_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="#" class="submenlink">Banners</a></li>
       <li><a href="http://support.clubpenguinspin.com" class="submenlink">Contact Us</a></li>
       <li><a href="#" class="submenlink">More</a></li>
   </ul>
  </div>
</div>

<div class="submenu" id="yeaman_submenu" 
    onmouseover="ShowItem('yeaman_submenu');" 
    onmouseout="HideItem('yeaman_submenu');">
  <div class="submenubox">
    <ul>
   </ul>
  </div>
</div><!-- end of sub-meus -->

</a></a></a></a></a></div>
</center>

这是我的 CSS:

.mynavbar {
    position: relative;
  width: 974px;
  height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
  margin: 0; border: 0; padding: 0;
  background-color: #005EFF; 
  border-bottom: #003cff solid 3px; 
  border-left: #003cff solid 3px; 
  border-right: #003cff solid 3px; 
}

a.navbartitle {
  display: block; 
  float: left;
  color: white;
  text-shadow: 1px 1px 3px #000;
  outline: 0;
  background-color:  #005EFF;
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0; border: 0; padding: 0;
  line-height: 23px; /* corresponds to 'top' value of .submenu below */
  text-align: center;
  text-decoration:none;
}
a.navbartitle:hover {
  background-color: #0241AD;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 120px; }
#t5 { width: 110px; }
#t6 { width: 120px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
    a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
    Using these fixed values isn't as elegant as just letting the text of each 
    menu title determine the width of the menu titles and position of the submenus,
    but we found this hardwired approach resulted in fewer cross-browser/cross-OS 
    formatting glitches -- and it's pretty easy to adjust these title widths and the
    corresponding submenu 'left' positions below, just by eyeballing them whenever
    we need to change the navbar menu titles (which isn't often). */

.submenu {
    position:absolute;
  z-index: 2;
  top: 23px; /* corresponds to line-height of a.navbartitle above */
  padding: 0; margin: 0; 
    width:166px; /* If adjust this, then adjust width of .submenu below a too */
    color: white;
    background-color:  #0241ad;
    border: 1px solid transparent; /* box around entire sub-menu */
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
    font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */

/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed. 
   If you adjust menu title text, you might want to adjust these too. */
#products_submenu {  left: 0px; visibility: hidden;  }
#services_submenu {  left: 104px; visibility: hidden;  }
#funstuff_submenu {  left: 204px; visibility: hidden; }
#aboutus_submenu {  left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
#contact2_submenu { left: 408px; visibility: hidden; }
#yeaman_submenu { left: 517px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
    the mouse goes over the menu title. Using the 'visibility' property instead
    of using the 'display' property avoided a bug in some versions of Safari. 
    (The bug is pretty where esoteric: The browser ignored the 'hover' property 
    on 'li' objects inside an object whose display property was set to 'none' 
    when the page loaded...) Using the 'visibility' property instead of 'display'
    would normaly take up extra room on the page, but that's avoided here by putting
    the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
    in .submenu definition, higher up this page. */

.submenu a
{
  display: block;
  color: #eee; 
  background-color: #005EFF;
  width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
  padding: 5px 0px 4px 20px;
  text-decoration: none;
  background-color: #005EFF; 
  border-bottom: #003cff solid 1px; 
  border-left: #003cff solid 1px;
  border-right: #003cff solid 1px;
}


ul { position: left; display: block; }
li { position: left; display: block; }

.submenubox { 
  margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
  margin: 0; padding: 0; border: 0;
  list-style-type: none;
}

.submenubox ul li { 
  margin: 0; padding: 0; border: 0;
}

.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
  color: #c6e8e2; /* text color for submenu items */
  background-color: transparent;
  border-bottom: transparent solid 1px; 
}

请帮帮我!这对我的网站浏览者和其他人来说非常烦人。

:(

Answer 1

您必须添加结束语 </a>在“即将推出”和您的其他链接之后:

<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
      onmouseout="HideItem('products_submenu');" 
      onmouseover="ShowItem('products_submenu');"
    >Home</a><a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
      onmouseout="HideItem('services_submenu');" 
      onmouseover="ShowItem('services_submenu');"
    >Chat</a><a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
      onmouseout="HideItem('funstuff_submenu');" 
      onmouseover="ShowItem('funstuff_submenu');"
    >Twitter</a><a class="navbartitle" id="t4" href="#"
      onmouseout="HideItem('aboutus_submenu');" 
      onmouseover="ShowItem('aboutus_submenu');"
    >Extras</a><a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
      onmouseout="HideItem('contact_submenu');" 
      onmouseover="ShowItem('contact_submenu', 't5');"
    >Support</a>
<a class="navbartitle" id="t6" href="#"
      onmouseout="HideItem('yeaman_submenu');" 
      onmouseover="ShowItem('yeaman_submenu');"
    >Coming Soon</a>