CODEWITHSUNDEEP
cssmenusuperfish
Casper Slynge
Casper Slynge

Reputation: 344

Superfish horizontal nav-bar css issue

I am currently using the horizontal nav-bar created by Superfish (http://users.tpg.com.au/j_birch/plugins/superfish/#sample4) on my website www.bonusrunner.net (Under construction :)

The .css and .js files can be downloaded here: http://users.tpg.com.au/j_birch/plugins/superfish/#download

I am struggling with some css adjustments. I want my menu to be rather identical to the one on http://www.oddsportal.com - Can anybody help me? First of all, how do I make my submenu visible permanently, and secondly I want the submenu background to have a width of 100%.

Best, Slynge

Upvotes: 0

Views: 3212

Answers (1)

Henrik Ammer
Henrik Ammer

Reputation: 1899

First, add the correct code from the example (#4) to your page:

$(document).ready(function(){ 
    $("ul.sf-menu").superfish({ 
        pathClass:  'current' 
    }); 
});

(You forgot the pathClass on your page).

Then the included superfish-navbar.css will take care of the rest.

UPDATE

<ul class="sf-menu sf-navbar sf-js-enabled sf-shadow">
    <li class="current">
        <a href="http://www.bonusrunner.net/#a" class="sf-with-ul">Bonusrunner<span class="sf-sub-indicator"> »</span></a>
        <ul>
            <li>
                <a href="http://www.bonusrunner.net/#ab">Anvend Bonusrunner</a>
            </li>
            <li><a href="http://www.bonusrunner.net/#ab">Om Bonusrunner</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Ludomani Test</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Ansvarligt Spil</a></li>

        </ul>
    </li>
    <li>
        <a href="http://www.bonusrunner.net/#a" class="sf-with-ul">Casino<span class="sf-sub-indicator"> »</span></a>
        <ul>
            <li>
                <a href="http://www.bonusrunner.net/#ab">Casino Bonus</a>
            </li>
            <li><a href="http://www.bonusrunner.net/#ab">Casino Guide</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Casino Nyheder</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">No Deposit Casino</a></li>
        </ul>
    </li>
    <li>
        <a href="http://www.bonusrunner.net/#a" class="sf-with-ul">Betting<span class="sf-sub-indicator"> »</span></a>
        <ul>
            <li>
                <a href="http://www.bonusrunner.net/#ab">Betting Nyheder</a>
            </li>
            <li><a href="http://www.bonusrunner.net/#ab">Betting Guide</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Betting Ekspertråd</a></li>
        </ul>
    </li>

Note the class="current" on the menu that is supposed to be open on the load. Tried it on downloaded code from your site and works like a charm.

Upvotes: 1

Related Questions