CODEWITHSUNDEEP
htmlcssmenuhtml-lists
Karine
Karine

Reputation: 587

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 on mouse hover 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?

EDIT:

Here is my code:

HTML -->

 <div id="menu"> 
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
            </ul>
 </div> <!-- end menu -->

CSSS -->

div#menu ul
{
list-style-type:none;
}   
div#menu li
{
margin-left:2px;
display:inline-block;

border: 1px #FFF solid;
border-top:none;
border-bottom-right-radius: 6px 11px;
border-bottom-left-radius: 6px 11px;
}
div#menu li:hover
{
border-top:none;            
border: 1px #95d9e4 solid;
}
div#menu li a
{
text-decoration:none;
color:#FFF;
font-size:14px;
margin:0 6px 2px 6px;
line-height:20px;

}
div#menu li a:hover
{
color:#95d9e4;
margin:0 6px 4px 6px;
}

Upvotes: 4

Views: 6222

Answers (2)

moey
moey

Reputation: 10887

You can do something like:

li:hover {
  border-top: none;
}

# Note: this is different from 'li a:hover'!
li:hover a {
  position: relative;
  top: -2px;
}

Upvotes: 6

Ricardo Tomasi
Ricardo Tomasi

Reputation: 35253

Add bottom padding, subtract from line height:

div#menu li a:hover {
  color:#95d9e4;
  margin:0 6px 6px 6px;
  line-height:18px;
  padding-bottom:2px;
}

Upvotes: 0

Related Questions