Question

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

编辑：

这是我的代码：

HTML - ＆gt;

 <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 - ＆gt;

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

Answer 2

添加底部填充，从行高减去：

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

在<li> 2 px up </li>中移动文本基线

2 个答案: