li:hover>a affecting other list items

Question

What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?

nav {
      width: 100%;
      height: 5rem;
      background: red;
    }
    
    ul {
      margin: 0 auto;
      font-size: 0;
    }
    ul li {
      display: inline-block;
      line-height: 4.8rem;
      position: relative;
    }
    ul li > a {
      text-decoration: none;
      color: #FFF;
      font-family: "Verdana";
      padding: .1rem 1.5rem;
      font-size: 1.3rem;
      display: block;
      overflow: hidden;
      position: relative;
      transition: 300ms all;
      height: 100%;
      margin: 0;
    }
    ul li > a::before, ul li > a::after {
      content: '';
      width: 100%;
      position: absolute;
      left: 0;
      transition: 200ms all;
    }
    ul li > a::before {
      background: #FFF;
      height: .5rem;
      top: 0;
      transform: translateY(-100%);
    }
    ul li > a::after {
      background: #000;
      height: .4rem;
      bottom: 0;
      transform: translateY(100%);
    }
    ul li::before {
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #CCC;
      position: absolute;
      opacity: 0;
    }
    ul li:hover > a {
      padding-top: 0.6rem;
      padding-bottom: 0.1rem;
    }
    ul li:hover > a::before, ul li:hover > a::after {
      transform: translateY(0);
    }
    ul li:hover::before {
      opacity: 0.3;
    }

 <nav>
      <ul>
        <li><a href="">Link1</a></li>
        <li><a href="">Link2</a></li>
        <li><a href="">Link3</a></li>
        <li><a href="">Link4</a></li>
        <li><a href="test.html">Link5</a></li>
      </ul>
    </nav>

Why li:hover > a is affecting all list items?

Jonas Grumann · Accepted Answer · 2016-10-19T08:36:24.087

The problem is not your :hover selector, it's the display-block on the lis. inline-blockelements align on the baseline, this means that when you add a padding-topto one of them, all the others move down as well. To fix it float the elements to the left to keep them on one line and aligned to the top:

Demo: https://jsfiddle.net/403zexop/

nav {
    width:100%;
    height:5rem;
    background:red;
}

ul {
    margin:0 auto;
    font-size:0;
    overflow: hidden;
    li {
        display:block;
        line-height:4.8rem;
        position:relative;
        float: left;

        >a{
            text-decoration:none;
            color:#FFF;
            font-family:"Verdana";
            padding:.1rem 1.5rem;
            font-size:1.3rem;
            display:block;
            overflow:hidden;
            position:relative;
            transition:300ms all;
            height:100%;
            margin:0;

            &::before,&::after{
                content:'';
                width:100%;
                position:absolute;
                left:0;
                transition:200ms all;
            }

            &::before{
                background:#FFF;
                height:.5rem;
                top:0;
                transform:translateY(-100%);
            }
            &::after{
                background:#000;
                height:.4rem;
                bottom:0;
                transform:translateY(100%);
            }
        }

        &::before{
            content:'';
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:#CCC;
            position:absolute;
            opacity:0;
        }

        &:hover{
            >a{
                padding-top:0.6rem;
                padding-bottom:0.1rem;

                &::before,&::after{
                transform:translateY(0);
            }
        }

        &::before{
            opacity:0.3;
        }
    }
}

}

Note: I cleared the floats by adding overflow: hidden; to the ul

Thank you for the help and i wasn't aware of baseline problem of inline-block elements .I chose inline-block instead of float for the benefits of vertical-align , text-align and the use of line-height . But after this i feel using it a bit awkward along with the 4px margin problem . What is your best option for such menus float, inline-block or flex ? — Anoop D, Oct 19 '16 at 10:20
I don't understand what you mean with "the 4px margin problem", could you rephrase that, please? I personally would float those elements and then use the line-height or padding to center the text vertically. — Jonas Grumann, Oct 19 '16 at 11:22
http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Anoop D, Oct 19 '16 at 14:22
Oh I see. I usually go for the floats, I only use inline-blocks when I want that white space between elements (icons before the text, etc). Floats are a little bit annoying because you have to clear them but inline-blocks have even more downsides. I don't use flex yet because of the browser support — Jonas Grumann, Oct 19 '16 at 14:52

score 0 · Answer 2 · answered Oct 19 '16 at 08:32

0

"li:hover > a" is correct!

The problem is, that with changing the padding you alter the height of the element, and the parent container has to adapt and as well all other childs.

You can see it when you do not change the padding, but just the background-color of the hovered a. You will see, it is just altering the current element.

answered Oct 19 '16 at 08:32

K.S.

153
1
1
10

1

Please see my answer. The problem is not even the padding itself, it's that the elements are aligned on the baseline due to the inline-block. – Jonas Grumann Oct 19 '16 at 08:37

li:hover>a affecting other list items

2 Answers2