当您将鼠标悬停在子类别上时，下拉菜单会消失

Question

在this site我有一个下拉菜单，当我尝试将鼠标悬停在子类别上时，该菜单会消失。我发现了一个修复程序 - 更改'top：_'信息以使其重叠。这很好用，但看起来很难看。我目前有一个差距（我想要），如果我足够快地悬停我可以说它，但这不是特别用户友好。我在某处看到边界可能会给它带来问题吗？

CSS代码

#navigation {
    height: 37px;
    background-image: url(../images/background/navbar.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    padding-bottom: 8px;
    padding-top: 8px;
}

.nav-container {
}

#nav {
    float: left;
    height: 37px;
    font-size: 13px;
    z-index: 998;
}

  /* ALL Levels */ /* Style consistent throughout all nav levels */
#nav li {
    position: relative;
    text-align: left;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #fff;
    margin-left: 10px;
    height: 21px;
    left: -1px;
}

#nav a,
#nav a:hover {
    display: block;
    line-height: 1.3em;
    text-decoration: none;
}

#nav span {
    display: block;
    cursor: pointer;
    white-space: nowrap;
}

#nav li ul span {
    white-space: normal;
}

/* 0 Level */
#nav li {
    float: left;
    margin: 0;
}

#nav a {
    float: left;
    color: #fff;
    line-height: 21px;
    padding-top: 0px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 12px;
    margin-bottom: 8px;
}

#nav li.over a,
 #nav a:hover, #nav li a:hover {
 /*color:#444; text-shadow: 0px 1px #fff;*/;
}

#nav a:hover {
    line-height: 21px;
}

#nav li:hover a {
 /*color: #444 !important; text-shadow: 0px 1px #fff; */;
}

#nav li.over, #nav li:hover {
 /*color: #444 !important;*/;
}

#nav li.active {
}

#nav li.active a {
 /*color: #444 !important;text-shadow: 0px 1px #fff !important;  */;
}

#nav li.home {
    background: none;
    padding-right: 0;
}

#nav li.home a {
    padding-left: 10px;
}

 /* 1st Level */
#nav ul li,
 #nav ul li.active,
 #nav ul li.over {
    float: none;
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    text-transform: none;
    height: 20px;
}

#nav ul li.parent {
    background: url(../images/bkg_nav_parent.gif) no-repeat 100% 50%;
}

#nav ul li.last {
    padding-bottom: 0;
}

#nav ul li.active {
    margin: 0;
    border: 0;
    background: none;
}

#nav ul a,
 #nav ul a:hover {
    float: none;
    padding: 0;
    background: none;
    line-height: normal;
}

#nav ul li a {
    font-weight: normal !important;
}

  /* 2nd Level */
#nav ul {
    position: absolute;
    width: 15em;
    top: 30px;
    left: -10000px;
    -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
    background-color: #FFF;
    margin-right: 0px;
    margin-left: 0px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    border: medium solid #087d74;
    margin-bottom: 10px;
    z-index: 10;
}

  /* Show menu */
#nav li.over > ul {
    left: 0px;
}

#nav li.over > ul li.over > ul {
    left: 100px;
}

#nav li.over ul ul {
    left: -10000px;
}

#nav li:hover > ul li:hover {
    background-image: none !important;
}

#nav li.parent > ul li a {
    background-image: none;
    text-shadow: 0px 1px #fff !important;
}

#nav li.parent > ul li a:hover {
    background-image: none;
    text-shadow: 0px 1px #fff   !important;
}

#nav ul li a {
    color: #333 !important;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    margin-bottom: 20px;
    padding-top: 10px;
    height: 20px;
    margin-top: 10px;
    margin-right: 12px;
    margin-left: 12px;
    font-size: 12px;
}

#nav ul li.last a {
    border-bottom: 0px;
}

#nav ul li a:hover {
    color: #087d74 !important;
    text-shadow: none !important;
    margin-bottom: 15px;
    padding-top: 10px;
}

 /* 3rd+ Level */
#nav ul ul {
    top: 0px;
    border: 1px solid #bdbdbd;
}

#nav ul ul li a {
    border-width: 1px 0px;
}

a.bord {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #FFF;
}

HTML代码

<div class="nav-container">
  <ul id="nav">
    <li class="level0 nav-1 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)">
      <a href="http://www.ivcatalina.com/magento/index.php/furniture.html">
        <span>
          Furniture
        </span>
      </a>
      <ul class="level0">
        <li class="level1 nav-1-1 first">
          <a href="http://www.ivcatalina.com/magento/index.php/furniture/living-room.html">
            <span>
              Living Room
            </span>
          </a>
        </li>
        <li class="level1 nav-1-2 last">
          <a href="http://www.ivcatalina.com/magento/index.php/furniture/bedroom.html">
            <span>
              Bedroom
            </span>
          </a>
        </li>
      </ul>
    </li>
    <!-- Other menu items -->
  </ul>
</div>

Answer 1

我为你提供了一个简单的解决方案。您甚至不必更改JavaScript 在styles.css课程的#nav span中，将此行添加到您的代码中：margin-bottom:10px;

所以它会是：

#nav span {
   display:block;
   cursor:pointer;
   white-space:nowrap;
   margin-bottom:10px;
}