CODEWITHSUNDEEP
csshyperlinksuperfish
Spirit
Spirit

Reputation: 176

Why link not filling li element even though display:block?

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

Upvotes: 0

Views: 1854

Answers (2)

The Alpha
The Alpha

Reputation: 146201

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.

Upvotes: 2

Dave Taylor
Dave Taylor

Reputation: 2045

The reason your links aren't expanding to fill the box is because they are floated left. Remove that and you should be fine.

Upvotes: 0

Related Questions