Question

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>

Answer 1

目前的布局目标并不完全清楚，但这是一个解决方案。

从id="main-menu"更改width 100%;到auto;
将id="sub-menu" width从700px;更改为665px;

jsFiddle DEMO

编辑：这种替代方法会保留您当前的宽度，以说明您可以“扩展”最后一个导航按钮 悬停区域 它是最宽的可用宽度。

请注意，在这个jsFiddle中，您会看到需要进行调整以“填补当前实时CSS在使用100%时所使用的空白”，但您可以将其更改为完全 <您需要的em>像素值 。

jsFiddle DEMO v2 100% width

jsFiddle DEMO v3 Pixel width

提醒：v2和v3中使用的边框会增加面包屑的大小。

如何保持我的最后一个水平导航项目不被包装到下一行？

1 个答案: