Grow your CSS skills. Land your dream job.

Correct Way To Add a Bottom Border Between Nav Items?

  • MBM
    # April 27, 2013 at 6:09 pm

    I want to add a bottom border between nav items :

    div.navborder {
    margin-left:50px;
    padding-top:20px;
    width:200px;
    border-top:1px solid #000000;}

    Fails navigation :

    Line 42, Column 23: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

    What’s the correct way to do this? Can it be done without nesting two menus in divs?

    # April 27, 2013 at 6:17 pm

    I guess you could use `:nth-child():after`.

    Something like:

    #navigation li:nth-child(7):after {
    content: “”;
    display: block;
    margin-left:50px;
    padding-top:20px;
    width:200px;
    border-top:1px solid #000000;
    }

    MBM
    # April 27, 2013 at 6:40 pm

    Perfect! Made a couple of adjustments :

    #navigation li:nth-child(7):after {
    content: “”;
    display: block;
    margin-top:20px;
    width:200px;
    border-top:1px solid #000000;
    }

    Live here : http://mbmitservices.co.uk/pcommerce/index.html

    Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".