Question

I am using superfish menu and I am having a problem which I can’t figure out although I’m sure the answer is probably obvious and I’m just missing it…

Basically my a elements are not expanding to fill their containing li elements, even though the a elements are set to display:block

Please see example here:

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

css is here:

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

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

Here’s the relevant 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 -->

A second issue I am having is how to get the second level menu to appear in the same place for each first level link. If you hover over company then it’s 2nd level nav appears in the right place. But if you hover over development, it appears 1 row too low – i would like it to appear in the same place as the company menu did

Can anyone help me out with this please? thanks

Answer 1

Remove padding-right from .sf-menu a.sf-with-ul (superfish.css line-93) and add width 100% or 140px (home.css line 75) in #nav li a. I’ve tested it on your site and works fine. Tested in chrome and ff.