Add padding to suckerfish css menu

by 6 replies
8
Hi,

I'm using the menu from here: Suckerfish Dropdowns - Three Level Bones.

However, when trying to add some padding, it seems to push the sub-menu down.
In the above example, if I move my mouse over Percoidai>Remoras (the first submenu in the first item), instead of showing 'Echeneis' next to 'Remoras' it pushes Echeneis down around 3 pixels, so there comes a spacing above this item.

Any ideas on how I can add some padding to this menu?

Thanks.

Best regards,
Thomas
#programming #add #css #menu #padding #suckerfish
  • Anybody?

    Thanks.
  • Easy

    #nav ul { line-height: 1;
    list-style: none outside none;
    margin: 0;
    padding: 0 10px;


    }
  • Hi Cash Money Hosting,

    Thanks for replying. However that only add spacing to the sides of the text. I need to add a padding of for exampe 3px all around the text.
    I can see that I should have been more clear about that.

    Can you help with that?

    Thanks.

    Best regards,
    Thomas
  • padding: 'top' 'left' 'bottom' 'right';

    line-height sets line height

    also margin: 'top' 'left' 'bottom' 'right';

    if this is a link make sure the 'a:hover' has the same margin, paddings, etc like 'a'
    • [ 1 ] Thanks
  • For 1em padding around link:
    Code:
    #nav a { padding: 0.5em; width: 9em; }
#nav li ul ul { -2em 0 0 10em }
    #nav a width needs to be 10em - 2*padding
    #nav li ul ul top margin needs to be -1em - 2*padding

    so if you want .25em padding:
    Code:
    #nav a { padding: 0.25em; width: 9.5em; }
#nav li ul ul  { -1.5em 0 0 10em; }
    • [ 1 ] Thanks
  • Hi Mad and Steve,

    Thanks alot, it works now. I used Steve's samples.
    I'm pretty new with CSS (as you can probably tell), and have gone forward with trial and error, but now it works.

    Thanks alot, guys.

    Best regards,
    Thomas
Join the discussion

Next Topics on Trending Feed