Question

I’m working on a vertical menu with separator (CSS-only). To hide these separator on hover I try to use a border + a negative margin (to cancel the border). But on Firefox it create a line break… How can I fix it? Thanks

http://jsbin.com/akazuf/1/edit (try the output in full)

Nota : the hover will be BLACK, red is for tests.

No resolution here : Separators For Navigation 🙁

Answer 1

If you don’t want line breaks at all, you can add white-space: pre; to the #header .nav a style.

https://developer.mozilla.org/en-US/docs/CSS/white-space

Edit: A more elegant solution might be to switch the border directions (border-left to border-right, margin-right to margin-left:

#header .nav a {
    border-right: 2px solid #000000;
    font-family: 'Cuprum',sans-serif;
    font-size: 14px;
    padding: 0 25px;
    text-transform: uppercase;
}

#header .nav .current-menu-item a, #header .nav a:hover {
    background: none repeat scroll 0 0 #FF0000;
    border-left: 2px solid #000000;
    color: #FFFFFF;
    margin-left: -2px;
    padding: 14px 25px;
    text-decoration: none;
}