Dropdown Menu Part Deux

Paris

Now that this will work it looks pretty clunky.
I am wondering if I can modify the dropdown/flyout so it:
1.Drops down vertically in line with the menu block.
2.Change the spacing between the headings - change font colour and background colour.

Note: I am using PORTRAITS as my test.

Hikin' Mike

This should get you started:

html.sm-user-ui, .sm-user-ui {background-color:transparent;}

.sm-user-ui.yui3-menu-vertical a.yui3-menu-label, 
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label, 
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label {
    background: red;
    color: yellow;
    }   

    .sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover, 
    .sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover, 
    .sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover, 
    .sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover {
        background: yellow;
        color: red !important;
        }

.sm-user-ui .yui3-menu-children, 
.sm-user-ui .yui3-menu-label {
    border-color: green;
    }


.yui3-menu-open > .yui3-menu-children{
    left:-165px !important;
    top: 30px !important;
    }

Hikin' Mike

For the spacing of the headings, this is where they are now:

.yui3-menu-item > .yui3-menu-label {
    padding: 13px 46px 12px 22px;
    }   

To change the padding it goes 'top', 'right', 'bottom', 'left'.

Paris

That is pretty cool Mike!
Is there a way to make the dropdown each individual box height narrower and wider, and center the gallery name so lines up with the main name?
Muchas gracias.

Hikin' Mike

I gave you the code to change how much spacing is, unless I'm not understanding your question. As for as centering the dropdowns, no, you can't center the dropdown box under each main menu title.

Hikin' Mike

Just checked your site live and I see the spacing (padding) isn't working. You can sort-of center it by replacing this:

.yui3-menu-open > .yui3-menu-children{
    left:-95px !important;
    top: 20px !important;
    }

.yui3-menu-item > .yui3-menu-label {
    padding: 0px 10px 2px 2px;
    }

...and use this instead. If you keep added code below, the left/right padding won't make difference as the drop down will be width: 162px (the same width the top menu is.

.yui3-menu-open > .yui3-menu-children{
    left:-110px !important;
    top: 20px !important;
    width:162px !important;
    text-align: center
    }

.sm-user-ui .yui3-menu-item > .yui3-menu-label {
    padding: 2px 0;
    }

Hikin' Mike

To add the padding: 2px 0 is saying both top and bottom are at 2px and the left/right is set to 0px.

Paris

Brilliant Mike... the second one is the bomb!
Thank you so much. You have gone above and beyond and I am so grateful.
I had these crazy ideas and never thought I could come close using SmugMug but you came thru big time.
I'm thrilled!!!
If you are ever in Vancouver I owe you a beer and dinner.

Hikin' Mike

Glad to help.