1

http://www.ashlandmediagroup.com/menu-test/menu.html 最後のメニュー項目のホバー状態をメニューの最後まで拡張する必要がありますが、ズームインおよびズームアウト時にメニューが壊れます。

他のメニューでも同じ問題が発生したことがあり、これに対する解決策があるかどうかを知りたい.

これが私のコードです：

/* main navbar */

ul#main-menu {
  float: left;
  font-size: 14px;
  font-family: "arial";
  text-transform: uppercase;
  margin: 0;
  width: 100%;
}

ul#main-menu {
  height: 33px;
  list-style: none outside;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  behavior: url(http://www.ashlandmediagroup.com/menu-test/border-radius.htc);
}

ul#main-menu {
  background: url(nav-back.jpg) repeat-x;
}

ul#main-menu li {
  float: left;
  height: 33px;
}

ul#main-menu li a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 8px 20px 9px 20px;
  background: url('../images/nav-divider.jpg') no-repeat;
  height: 16px;
}

ul#main-menu li:first-child a {
  padding: 8px 10px 9px 26px;
  background: none;
}

ul#main-menu li:first-child.active {
  border-radius: 5px 0 0 5px;
}

li.wwd span,
li.wwd:hover span {
  display: block;
  background: url('../images/what-we-do-hover.png') no-repeat 135px 0;
  width: 165px;
}

ul#main-menu>li:hover,
ul#main-menu li.active {
  background: url(nav-hover.jpg) repeat-x;
}

ul#main-menu {}

li.wwd:hover {}

ul#main-menu li:last-child {
  /*
        border-radius : 0px 5px 5px 0px;
    	margin-right: 0px;
    */
}

ul#main-menu li:last-child a {}

ul#main-menu li:last-child a:hover {}

/* sub-menu: main categories */

#sub-menu {
  z-index: 100;
}

ul#main-menu ul {
  position: relative;
  left: -9999px;
  background: rgba(255, 255, 255, 0);
}

ul#main-menu ul li {
  /* Introducing a padding between the li and the a give the illusion spaced items */
  float: left;
}

ul#main-menu ul li a {
  height: auto;
}

ul#main-menu ul#sub-menu a {
  white-space: nowrap;
  /* Stop text wrapping and creating multi-line dropdown items */
}

ul#main-menu li:hover ul,
ul#main-menu li.active ul {
  /* Display the dropdown on hover */
  left: 0px;
  /* Bring back on-screen when needed */
}

ul#main-menu li:hover a {
  /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
  text-decoration: none;
}

ul#main-menu li:hover ul a {
  /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
  text-decoration: none;
}

ul#main-menu li:hover ul li a:hover {
  /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}

ul#main-menu ul#sub-menu {
  height: 51px;
  background: #e7eff2;
  border-radius: 0 0 5px 5px;
  width: 700px;
}

ul#main-menu ul#sub-menu li {
  background: none;
  font-size: 12px;
  height: 51px;
  color
}

ul#main-menu ul#sub-menu li:hover {
  background-color: d8e0e8;
}

ul#main-menu ul#sub-menu li a {
  color: #3a6f8f;
  text-transform: none;
  padding: 0 30px 0 30px;
  font-size: 13px;
  line-height: 51px;
  font-weight: bold;
  border-right: 1px solid #d8e0e8;
}

ul#main-menu ul#sub-menu li:last-child a {
  border-right: none;
}

ul#main-menu ul#sub-menu li a.active,
nav#main-nav ul#main-menu ul#sub-menu li a:hover {
  color: #000033;
}
<div style="width: 940px;margin: 30px auto;">
  <nav class="sixteen columns" id="main-nav">
    <div class="" id="nav-container">
      <ul id="main-menu">
        <li class="wwd active"><span><a href="/what-we-do">What We Do</a>
    <ul id="sub-menu">
    <li><a href="/citizen_health_and_safety">Citizen Health &amp; Safety</a></li>
    <li><a href="/revenue_and_spending">Revenue &amp; Spending</a></li>
    <li><a href="/open_accountable_government">Open, Accountable Government</a></li>
    </ul>
    </span></li>
        <li><a href="/resources">Resources</a></li>
        <li><a href="/government_matters">Recent Analysis</a></li>
        <li><a href="/the_fine_print">Blog</a></li>
        <li><a href="/press_room">Press Room</a></li>
        <li><a href="/about-us">About Us</a></li>
        <li><a href="/get_involved">Take Action</a></li>
      </ul>
    </div>
  </nav>
</div>

4

1 に答える 1

2

現在のレイアウトの目標は完全には明らかではありませんが、ここに 1 つの解決策があります。

  1. id="main-menu" widthから変更100%; にauto;

  2. id="sub-menu" widthから700px;に変更665px;

jsFiddle デモ

EDIT：この代替方法は、最後のナビゲーションボタンのホバー領域を利用可能な最大幅まで「拡張」できることを示すために必要な現在の幅を保持します。

この jsFiddle では、現在のライブ CSS が を使用するときに使用している「ギャップを埋める」ために調整が必要であることがわかりますが100%、それを必要な正確なピクセル値に変更できます。

jsFiddle DEMO v2 100% 幅

jsFiddle DEMO v3 ピクセル幅

注意: v2 と v3 で使用される境界線は、ブレッドクラムのサイズに追加されます。

于 2013-01-04T09:06:13.573 に答える