a:hover

1. <ul>  
2.     <li><a href="#">1</a></li>  
3.     <li><a href="#">2</a></li>  
4.     <li><a href="#">3</a></li>  
5.     <li><a href="#">4</a></li>  
6.     <li><a href="#">5</a></li>  
7.     <li><a href="#">6</a></li>  
8.     <li><a href="#">7</a></li>  
9.     <li><a href="#">8</a></li>  
10.     <li><a href="#">9</a></li>  
11.     <li><a href="#">10</a></li>  
12. </ul>  

1. ul {  
2.     list-style:none;  
3.     float:left;  
4.     display:inline;  
5. }  
6. ul li {  
7.     float:left;  
8. }  
9. ul li a {  
10.     float:left;  
11.     padding:4px;  
12.     margin-right:3px;  
13.     width:15px;  
14.     color:#000;  
15.     font:bold 12px tahoma;  
16.     border:1px solid #eee;  
17.     text-align:center;  
18.     text-decoration:none;  
19. }  
20. ul li a:hover, ul li a:focus {  
21.     color:#fff;  
22.     border:1px solid #f40;  
23.     background-color:#f40;  
24. }  

위내용을 정리해보면,

1. 목록을 우선 float 시켜서 가로로 배열하고,
2. 각 li 들의 a 값을 이용해서 width 값을 고정시키고,
3. a 에 비활성화 상태의 스타일을 정의하고,
4. a의 hover 선택자에서 활성화 상태의 스타일을 정의