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 & Safety</a></li> <li><a href="/revenue_and_spending">Revenue & 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> 
