Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Служба</a></li>
      <li><a href="#">Рендзина</a></li>
      <li><a href="#">Солеперенос</a></li>
      <li><a href="#">Медиапланирование</a></li>
      <li><a href="#">Таргетирование</a></li>
      <li><a href="#">Позицианирование</a></li>
      <li><a href="#">Медиамикс</a></li>
      <li><a href="#">Законодательство</a></li>
    </ul>
  </nav>
</body>
</html>
 
body {
  padding: 0;
  margin: 0;
}
ul {
  li {
    list-style: none;
    margin: 5px 0;
    width: 400px;
    a {
      color: #000;
      text-decoration: none;
      font: 14px Arial, sans-serif;
      padding-left: 25px;
      display: inline-block;
      width: 100%;
      background: url(http://cdn.joxi.ru/uploads/prod/2014/10/01/773/c69/9659031f4e15d37c2dfb0b0941b5825c336f232b.png) no-repeat 0 0;
      opacity: .8;
      
      &:hover {
        opacity:1;
        background-color: #F7F7F7;
      }
      
    }
    &:nth-of-type(2) {
      a {
        background-position: 0 -24px
      }
    }
    &:nth-of-type(3) {
      a {
        background-position: 0 -49px
      }
    }
    &:nth-of-type(4) {
      a {
        background-position: 0 -75px
      }
    }
    &:nth-of-type(5) {
      a {
        background-position: 0 -99px
      }
    }
    &:nth-of-type(6) {
      a {
        background-position: 0 -121px
      }
    }
    &:nth-of-type(7) {
      a {
        background-position: 0 -147px
      }
    }
    &:nth-of-type(8) {
      a {
        background-position: 0 -168px
      }
    }
    &:nth-of-type(9) {
      a {
        background-position: 0 -196px
      }
    }
  }
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers