Search code examples
htmlcssmenuhtml-listsmousehover

Move text baseline in <li> 2 px up

I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?

Solution

  • The trick is to remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.

    I have set up a simple example of what you want. Check it on the fiddle here

    The HTML:

    <ul>
  <li><a href="#">Home</a></li>
</ul>

    The CSS:

    ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }

li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }