CSS 롤오버가 포함 된 Horozontal nav

롤오버는 호버에 하나의 이미지를 사용합니다. 멋지지만 수평 메뉴에서 작동시키는 법을 모르겠습니다. 나는 무엇을해야합니까?
감사합니다,CSS 롤오버가 포함 된 Horozontal nav

<head> 
<style> 
/*CSS HOVER WITH ONE IMAGE*/ 
#emailUs{display: block;width: 107px;height: 23px;background: url("slide.jpg") no-repeat 0 0;} 
#emailUs:hover{background-position: 0 -23px;} 
#emailUs span{position: absolute;top: -999em;} 
</style> 
</head> 
<body> 
<!--Trying to get three buttons to go across 'same button as example'--> 
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a> 
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a> 
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a> 
</body> 
</html> 
</html>

CSS 스프라이트
enter image description here

출처

2011-03-30 DisEngaged

나는 당신이 CSS를 찾고있는 생각 : "플로트 : 왼쪽;"

"display : block;"링크를 설정하면 자동으로 다음 줄로 이동합니다. 즉, 왼쪽으로 뜨게 만들면 다시 수평선으로 나타납니다.

또한 동일한 ID를 가진 요소가 두 개 이상 없어야합니다. 하나 이상의 요소에서 필요한 것 대신 클래스를 사용하십시오.

출처

2011-03-30 21:19:42 Dave

또한 특정 숫자를 사용하는 대신 배경 위치를 왼쪽 위, 왼쪽 아래로 설정할 수 있습니다. 이렇게하면 나중에 버튼 크기를 변경하는 것이 더 쉬워집니다. – Dave

"float"을 많이 사용하지 않은 경우 div 뒤에 메뉴 또는 "clear : both;"를 입력해야합니다. 코드의 다음 항목이 떠 다니는 메뉴 아래로 밀어 올려지지 않도록해야합니다. – Dave

고마워, 지금은 너무 쉽다. – DisEngaged

CSS 롤오버가 포함 된 Horozontal nav

답변

관련 문제