Question

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?

Answer 1

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 ; }