为什么即使 display:block 链接也没有填充 li 元素？

Question

我正在使用 superfish 菜单，我遇到了一个我无法弄清楚的问题，尽管我确信答案可能是显而易见的，但我只是错过了它......

基本上我的 a 元素不会扩展以填充其包含的 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 line 75)。我已经在您的网站上进行了测试并且工作正常。在 chrome 和 ff 中测试。

Answer 2

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