long dropdown menu solution

Question

Chris from css-tricks.com created a beautiful solution for long dropdown menu's: here

I implemented this on the following page: onomadesign.com/wordpress/portfolio/identity-design, on the upper right side.

But I want this submenu to be visible all the time, so there is no need for clicking 'projects'.

Could someone help me with that? I'm definitly not a jQuery pro. Thank you.

Answer 1

Can you just do something like:

$(function(){
    $('#sub_menu).show();
});

At that point you may then be able to remove the anchor tag for the "projects" link. Let me know if that doesn't work for you.

EDIT:

You could also try:

$('#sub_menu').css({height:400,overflow:'hidden'}).show();

which appears to work in both FF and IE if you switch from the jQuery plugin to the regular JS file that is downloadable from the site you linked. The issue with this is that the dropdown will disappear when you mouse out of the drop down. To me, this is desirable since it's open when the user first sees the page but can be hidden by mousing over it and then mousing away. If you want it to always stay open, you can use the following code:

$('.dropdown > li').bind('mouseleave', function(event) {
    $('#sub_menu').css({height:400,overflow:'hidden'}).show();
});

which should do the trick.

Answer 2

This probly isn't a great answer, but it works:

<script type="text/javascript" charset="utf-8">     
    $(document).ready(function() {      

        $('.dropdown > li').longDropdown({
            visible: 50
        });         
        $('.margin').live(function() {              
            $this = $(this);                
            $("body").css('marginTop', $this.attr('rel') + 'px');
            return false;
        });

            $('.dropdown a:first').click(); 

    });
</script>