html - 将 中的文本基线向上移动 2 px

Question

我通过内联“ul”的“li”-s 实现了我的网页菜单。 “li”有彩色边框并包含“a”。现在在鼠标悬停时，我需要更改“a”内文本的颜色，并通过不移动 li 边框将其向上移动 2px。我该怎么做？

编辑:

这是我的代码:

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

CSS-->

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

Answer 1

你可以这样做:

li:hover {
  border-top: none;
}

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