ThemeShaper Forums » Thematic


Adding margin-bottom to dropdown menu

(9 posts)
  • Started 11 years ago by defries
  • Latest reply from defries
  • This topic is not resolved


  1. Hi All,

    I've been trying to get the standard thematic dropdown menu ul to add a bottom margin of 500px when you hover over a certain dropdown menu but I can't seem to figure out where and how to add those 500px. I *think* I have tried every single location of each of the seperate sf-menu CSS items, but no luck so far..

    To see what I mean have a look at this picture

    Posted 11 years ago #
  2. .. try:

    .sf-menu {margin-bottom: 500px;}

    The number is the one from the top level entry. In my case the margin-bottom will only happen while hovering over the one top level entry. You might need to change a couple more status things.


    Posted 11 years ago #
  3. Thanks Chris.. so it looks like if I want all those menu's to do the same I have to look for all the page-item id's :(

    The idea was to have that margin-bottom be 500px as long as you're hovering the entire menu item (news in this case, but all the menu items would need to have the same behaviour ...

    Posted 11 years ago #
  4. Sorry for this .. not enough sleep last night :)

    Yikes .. how many levels do you have in your menu?

    Posted 11 years ago #
  5. Don't apologize! glad you're taking a look at it!

    Just two levels :)

    Posted 11 years ago #
  6. This snippet should do the job:

    .sf-menu li:hover, .sf-menu li.sfhover {
    .sf-menu ul li:hover, .sf-menu ul li.sfhover {

    In the standard theme the right border of the last page item will be 500px high. Don't know if I can fix this one.

    Posted 11 years ago #
  7. Jamie Mitchell

    try using height instead of margin-bottom, and give the ul a background

    .sf-menu ul{
        background: #f5f5f5; /*or any color*/
        height: 500px  /*make it any height you want*/

    tested it and works fine here, the height will include the list items in the menu, so you may want to make it higher.

    is this what you after, or did i miss something.

    Posted 11 years ago #
  8. @Chris.. sorry for the late reply, but this doesn't work as it pushes the content down when you hover. The hover should be displayed as an overlay (i.e. just like the regular dropdown does, just 500px more)

    @Jamie the only thing I noticed happening was the that the dropdown menu's weren't displaying when hovering :(

    You can see what I'm doing over here

    Posted 11 years ago #
  9. If anyone ever needs something like this, this is the solution I found:

    sf-menu ul {
        border-right:1px solid #fff;
        border-bottom:500px solid #fff;
    width: 156px;

    The width is optional of course, but you catch my drift ;-).

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.