2

このサイトには、サブカテゴリにカーソルを合わせようとすると消えるドロップダウン メニューがあります。'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>
4

1 に答える 1

0

私はあなたに簡単な解決策を作りました。JavaScript を変更する必要さえありません。at the class で、次の行をコードに追加します
。styles.css#nav spanmargin-bottom:10px;

したがって、次のようになります。

#nav span {
   display:block;
   cursor:pointer;
   white-space:nowrap;
   margin-bottom:10px;
}
于 2013-06-09T18:11:10.927 に答える