Отображение пунктов в WordPress меню на разной высоте

Question

Я пытаюсь отобразить 3 последних пункта в меню на разной высоте.(На 10px выше)

Я могу оформить их с помощью:

#main-nav li:nth-of-type(n+6){
font-size:12px;
margin-left:30px;
}

, но по какой-то причине:

#main-nav li:nth-of-type(n+6){
margin-top:-10px; 
}

не работает.

Есть идеи, как этого добиться?

Answer 1

Ваш код работает, это просто родительский контейнер, который не позволяет вам увидеть эффекты.

Попробуйте изменить float:right на #main-nav на display:flex.

#main-nav {
    /*float: right;*/
    display: flex;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 0;
}

Я обычно стараюсь вообще не использовать float в моем CSS, так как они не предназначены для макета.