problem with CSS styling on sub menu with 2 cols

[dalew32]

Guys (and gals Smile ) i have built a menu (using examples etc) i have it working around 99% correct. Its a dynamic menu. The problem i am having is i cant get the items on the drop menu (second level) to Push Up in-line. There is a big spacing between them and i have tried lots of different changes. It needs to be a two col sub menu but links closed up

Please have a look at this fiddle and let me know where i am going wrong:
http://jsfiddle.net/06pp180k/16/

Thanks in advance

[Beverleyh]

Hiya,

I'm not sure what you're describing - can you make a mock-up image in Photoshop to show exactly how you'd like it to look?

[dalew32]

Hi Beverleyh
Thanks for the reply

When you hover over the main menu the second sub menu drops. If you take a look at the spacing (top and bottoM) of the links, there is a lot of white space. I want this to be narrower. Tried various changes, but not getting anywhere

Thanks


http://jsfiddle.net/06pp180k/16/

[Beverleyh]

The height from here is cascading down on to all list items;

.drop_menu LI {
    float: left;
    background-color:#fff;
    height:40px;
    margin-top:-6px;
}

So you would need to override is on nested list items like this (put below the declaration above);

.drop_menu li li { height:25px }

This is also causing problems for the drop-downs - they don't stay open when you move from the parent menu item;

.drop_menu UL {
    list-style-type: none;
    position: absolute;
    left: -999px;
    z-index: 1000;
    top: -999px;
    margin-top:19px;
    margin-left:14px;
    padding:0;
}

Change it to margin-top:14px so that the sub menu stays open.

[dalew32]

Your a star thanks Bev, i have posted this on stackoverload etc and no could answer.
THanks so much

[Beverleyh]

No problem. Glad to help