Почему буквы тоже наклонены в меню?

Question

[Максим Тюльпаков]

Наклонил пункты меню, потом в следующем правиле для ссылок a наклон вернул обратно, но они "не выпрямляются"...

nav>ul>li {
  display: inline-block;
  	-webkit-transform: skewX(-20deg);
	   -moz-transform: skewX(-20deg);
	     -o-transform: skewX(-20deg);
}
nav>ul>li>a{
  text-decoration: none;
  background: #61c2e5;
 padding: 10px;
  font-size:130%;
  color:white;
  -webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
 -o-transform: skewX(20deg);
}

Comments

[Максим Тюльпаков]

SelenIT2: ок :)

[Максим Тюльпаков]

SelenIT2: Не подскажешь, почему теперь у активной нажатой кнопки фон остается голубым, тогда как должен быть белым:

nav>ul>li:hover,nav>ul>li:active,
nav>ul>li:focus{
background: white;
}

nav>ul>li>a:hover, nav>ul>li>a:active,
nav>ul>li>a:focus{
color:#61c2e5;
}

Answer 1

[Котик Антон]

Фон нужно задавать тогда для li, а ссылку сделать блочным элементом.

nav>ul>li {
    display: inline-block;
    background: #61c2e5;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
}

nav>ul>li>a {
    display: block;
    text-decoration: none;
    padding: 10px;
    font-size:130%;
    color:white;
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -o-transform: skewX(20deg);
}

Comments

[Максим Тюльпаков]

Не подскажешь, почему теперь у активной нажатой кнопки фон остается голубым, тогда как должен быть белым:

nav>ul>li:hover,nav>ul>li:active,
nav>ul>li:focus{
background: white;
}

nav>ul>li>a:hover, nav>ul>li>a:active,
nav>ul>li>a:focus{
color:#61c2e5;
}

[Котик Антон]

Максим Тюльпаков: Потому что псевдокласс :active применяется только к ссылкам и кнопкам.

[Максим Тюльпаков]

27cm: получается какой-то порочный круг. Как быть? Если сделаю для ссылки фон, тогда он становится квадратным..

[Котик Антон]

Максим Тюльпаков: Текст внутри ссылки обернуть в span. Ссылки поворачивать (-20deg), а span с текстом вернуть обратно (20deg).