Archived topic

Formatting Nav Sub Menu Dropdown Area

1 reply · Started by Brian on October 14, 2017

Viewing posts 1–2 of 2

October 14, 2017 at 9:04 am #403161

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!

October 14, 2017 at 11:19 pm #403424

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;
 }

This archived topic is closed to new replies.

Start building better websites today.