[Support request] Formatting Nav Sub Menu Dropdown Area

Home Forums Support [Support request] Formatting Nav Sub Menu Dropdown Area

Home Forums Support Formatting Nav Sub Menu Dropdown Area

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #403161
    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!

    #403424
    Tom
    Lead Developer
    Lead Developer

    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;
     }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.