Good day to all! How to make so that when pointing the button the vertical dividers of this button disappear from both sides, only the left disappears from me. Here is the menu itself http://jsfiddle.net/AJIEKCEU/cevKs/

    2 answers 2

    Reshape your CSS as follows (maybe make some corrections and remove the extra)

    div{ width: 404px; margin 0 auto; } div ul{ display: block; background: #d0001e; width: 404px; height: 100px; } div ul li{ display: block; float: left; width: 100px; text-align: center; border-top: 1px solid #ec203d; border-left: 1px dotted #000; } div ul li a{ display: block; width: 100px; height: 100px; padding: 15px 0 15px 0; font-family: Myriad Pro; font-size: 16px; color: #fff; text-decoration: none; text-transform: uppercase; } div ul li:hover{ background: #fff; border-top: 1px solid #fff; border-left: 1px solid #fff; } li:hover+li{ border-left: 1px solid transparent; } a:hover{ color: #de0524; }
    • OOOO, but this is what I need. Thank you - Karalahti

    Here, take a look - http://jsfiddle.net/Alex83/cevKs/12/

    In short, I simply replaced first-child with last-child, and, accordingly, replaced all border-left with border-right

    Good luck

    Well, and still, a little advice on the sequence of rules - look at how I did it ... In my opinion, it’s so more visual. What do you think?

    Yes, and it is not necessary to fence the extra blocks, since the ul element is initially block, then the div can be thrown out.

    UPD: Corrected, click on the link to jsfiddle again.

    • Thanks, of course, new ones did the same thing, and I just differently, I also need that when you hover the button, the left and right border disappear or are made under the menu color so that you cannot see)) - Karalahti
    • @Karalahti, fixed. - Astor