[Support request] Formatting Nav Sub Menu Dropdown Area

[Brian]

Hello,

I am attempting to format the sub menu dropdown area with:

1) A border around the left, right, and bottom
2) A small triangle of the same color as the sub menu background that points up toward the Main nav item (example: when hovering the main navigation on http://www.espn.com/)
3) A “shadow” effect around the sides of the dropdown sub menu area.

Any help would be much appreciated – Thank you!

[Tom]

Hi there,

Something like this should get you started:

.main-navigation ul ul {
    border: 1px solid #222;
    border-top: 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.8);
}

.main-navigation ul ul:after {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;
 }

[Author]

Posts