为什么链接不填充li元素即使display：block？

Question

我正在使用superfish菜单，我遇到了一个我无法弄清楚的问题，虽然我确定答案很明显，但我只是错过了...

基本上我的元素没有扩展来填充它们包含的li元素，即使a元素设置为display：block

请看这里的例子：

http://www.spiritlevel.co.uk/fpatest/index_hover2.html

css在这里：

http://www.spiritlevel.co.uk/fpatest/css/superfish.css

http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css

这是相关的HTML

<div id="homenav">

<ul id="nav" class="sf-menu sf-vertical">

<li id="company"><a href="*">COMPANY</a>
 <ul id="companymenu">
<li id="profilelink"><a href="*">Profile</a></li>
<li id="activitylink"><a href="*">Activity</a></li>
<li id="strategylink"><a href="*">Strategy</a></li>
<li id="teamlink"><a href="*">Team</a></li>
    <li id="financelink"><a href="*">Finance &amp; Governance</a></li>
 </ul>
</li>

<li id="development"><a href="*">DEVELOPMENT</a>
  <ul id="developmentmenu">
<li id="partnerslink"><a href="*">Development Partners</a></li>
<li id="sociallink"><a href="*">Social Responsibility</a></li>
  </ul>
</li>

  <li id="projects"><a href="*">PROJECTS</a></li>
  <li id="contact"><a href="*">CONTACT US</a></li>

 </ul>
</div><!--end homenav -->

我遇到的第二个问题是如何让第二级菜单出现在每个第一级链接的相同位置。 如果您将鼠标悬停在公司上方，那么它的第二级导航将显示在正确的位置。 但是如果你将鼠标悬停在开发上，它会显示1行太低 - 我希望它出现在与公司菜单相同的位置

有人可以帮我解决这个问题吗？ 谢谢

Answer 1

从.sf-menu a.sf-with-ul（superfish.css line-93）中删除padding-right，并在#nav li a中添加宽度100％或140px（home.css第75行）。 我在你的网站上测试过它并且工作正常。 测试铬和ff。

Answer 2

您的链接未扩展以填充框的原因是因为它们向左浮动。 删除它，你应该没事。