css - 为什么显示: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 第 93 行)中删除 padding-right，并在 #nav li a 中添加宽度 100% 或 140px(home.css 第 75 行)。我已经在您的网站上对其进行了测试并且工作正常。在 chrome 和 ff 中测试。