Переместить базовый текст в <li>2 px вверх - PullRequest
Новая
       35

Переместить базовый текст в <li>2 px вверх

3 голосов
/ 20 ноября 2011

Я реализовал меню моей веб-страницы с помощью встроенных "li" -s из "ul".«li» имеет цветную рамку и содержит «a».Теперь при наведении мыши мне нужно изменить цвет текста внутри «а» и переместить его на 2 пикселя вверх, не сдвигая границу li.Как я могу это сделать?

РЕДАКТИРОВАТЬ:

Вот мой код:

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

Ответы [ 2 ]

5 голосов
/ 20 ноября 2011

Вы можете сделать что-то вроде: 

li:hover {
  border-top: none;
}

# Note: this is different from 'li a:hover'!
li:hover a {
  position: relative;
  top: -2px;
}
0 голосов
/ 20 ноября 2011

Добавить нижний отступ, вычесть из высоты строки: 

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