body {
    font: bold 11px Tahoma;
    }

#menu ul {
    margin:0;
    padding:10px 10px 0 50px;
    }

#menu li {
    display:inline;
    margin:0;
    padding:0;
    }

#menu a {
    float:left;
    background:url("left.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }

#menu a span {
    float:left;
    display:block;
    background:url("right.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#FFF;
    }

#menu a:hover span {
    color:#FFF;
    background-position:100% -42px;
    }

#menu a:hover {
    background-position:0% -42px;
    }

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu">
 <ul>
 <li><a href="/">Пункт 1</a></li>
 <li><a href="/">Пункт 2</a></li>
 <li><a href="/">Пункт 3</a></li>
 <li><a href="/">Пункт 4</a></li>
 <li><a href="/">Пункт 5</a></li>
 <li><a href="/">Пункт 6</a></li>
 </ul>
</div>
</body>
</html>

Уроки CSS