<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="author" content="php_expert"/>
<meta name="description" content="Как написать спрайт меню, средствами html и css"/>
<meta name="keywords" content="sprite, menu, css, html"/>
<style type="text/css">
*{outline:none}
#menu li{display:inline}
#menu li a{display:block;width:100px;height:50px;background:url(menu.jpg) top left no-repeat;float:left}
#menu #menu1 a:hover{background-position:0 -50px}
#menu #menu1 a:active{background-position:0 -100px}
#menu #menu1 a.active{background-position:0 -150px}
#menu #menu1 a.active:hover{background-position:0 -150px}
#menu #menu1 a.active:active{background-position:0 -150px}
#menu #menu2 a{background-position:-100px 0}
#menu #menu2 a:hover{background-position:-100px -50px}
#menu #menu2 a:active{background-position:-100px -100px}
#menu #menu2 a.active{background-position:-100px -150px}
#menu #menu2 a.active:hover{background-position:-100px -150px}
#menu #menu2 a.active:active{background-position:-100px -150px}
#menu #menu3 a{background-position:-200px 0}
#menu #menu3 a:hover{background-position:-200px -50px}
#menu #menu3 a:active{background-position:-200px -100px}
#menu #menu3 a.active{background-position:-200px -150px}
#menu #menu3 a.active:hover{background-position:-200px -150px}
#menu #menu3 a.active:active{background-position:-200px -150px}
</style>
<title>Как написать спрайт меню, средствами html и css</title>
</head>
<body>
<ul id="menu"><li id="menu1"><a href="#"></a></li><li id="menu2"><a href="#"></a></li><li id="menu3"><a class="active" href="#"></a></li></ul>
</body>
</html>
