8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Add padding to suckerfish css menu

by ThomasTe
6 replies
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
#add #css #menu #padding #suckerfish
  • Profile picture of the author ThomasTe
    Anybody?

    Thanks.
    {{ DiscussionBoard.errors[3606281].message }}
  • Profile picture of the author Cash Money Hosting
    Easy

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


    }
    {{ DiscussionBoard.errors[3616859].message }}
  • Profile picture of the author ThomasTe
    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
    {{ DiscussionBoard.errors[3618885].message }}
  • Profile picture of the author mad
    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'
    {{ DiscussionBoard.errors[3621389].message }}
  • Profile picture of the author SteveJohnson
    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; }
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[3621852].message }}
  • Profile picture of the author ThomasTe
    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
    {{ DiscussionBoard.errors[3624287].message }}

Trending Topics