네비게이션 배경 버튼 위로 이동

나는이 수평 메뉴를 가지고 있습니다. 메뉴는 탭처럼 보이며 높이가 29px입니다. 이미지는 CSS의 <li> 배경 이미지로 설정됩니다. CSS에서도 마우스 오버를 설정했습니다. 이제 8px로 이미지가 위쪽으로 움직이는 마우스를 놓으면됩니다. 이제 아래쪽으로 움직입니다.네비게이션 배경 버튼 위로 이동

CODE :

#nav li { 
    float:left; 
    list-style:none; 
    width:116px; 
    height:29px; 
    background-image:url(images/nav/nav_btn.png); 
    background-repeat:no-repeat; 
    padding-right:10px; 
    text-align:center; 
    padding-top:8px;} 

#nav li:hover { 
    float:left; 
    list-style:none; 
    width:116px; 
    height:37px; 
    background-image:url(images/nav/nav_btn_active.png); 
    background-repeat:no-repeat; 
    padding-right:10px; 
    text-align:center; 
    padding-top:8px; 
    padding-bottom:-8px;} 

<div id="nav"> 
<ul> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
</ul> 
</div>

출처

2011-11-06 Alexander Vaz

li:hover

padding-top:-8px; 
padding-bottom:8px;

편집에 패딩을 역

: NOT! 물론, 나는 내가 위에서 언급했을 때 나의 두뇌가 어디에 있는지를 모른다. 부정 padding과 같은 것은 없습니다. 나는 이것이 당신이 원하는 것 같아요 :

#nav li:hover { 
    float:left; 
    list-style:none; 
    width:116px; 
    height:37px; 
    background-image:url(images/nav/nav_btn_active.png); 
    background-repeat:no-repeat; 
    padding-right:10px; 
    text-align:center; 
    padding-top:8px; 
    padding-bottom:0px; 
    position: relative; 
    top: -8px; 
}

출처

2011-11-06 20:52:40 ScottS

작동하지 않습니다. 시도해 주셔서 감사합니다. –

죄송합니다. 그것은 좋지 않았습니다. (실제로 테스트하지 않고 답변을 얻었습니다.) 편집 된 개정판을 참조하십시오. 그것은 그것을 해결해야합니다. – ScottS

그 일을 했어! 고마워. 혹시 혹시 그 페이지에서 내가 어떻게 1 탭을 활성 상태로 만들 수 있는지 알았습니까? 그래서, 당신은 당신이 어떤 페이지인지 압니다. 다시 한 번 감사드립니다! –

패딩 - 가기 및 - 하단을 없애고 대신 배경 위치를 사용 하시겠습니까? 또한 규칙이 계단식으로 적용되어 실제로 #nav li 아래에 정의한 규칙을 #nav li:hover에 추가 할 필요가 없습니다.

출처

2011-11-06 22:29:02 shingokko

네비게이션 배경 버튼 위로 이동

답변

관련 문제