Вертикальные линии в списке с использованием :before

Kondo

Здравствуйте, подскажите пожалуйста, как после использования :before для постановки символа "|" в тексте находящемся в тегах завёрнутых в
  • первого уровня вложенности убрать символ "|" для первого элемента списка (HOME). Пробовал использовать :first-child, не сработало. Пример привёл ниже.
    <nav>
    <ul class="menu">
        <li><a href="#">HOME</a>
             <ul class="sub-menu">
                <li><a href="#">Sub-Menu 1</a></li>
                <li><a href="#">Sub-Menu 2</a></li>
                <li><a href="#">Sub-Menu 3</a></li>
            </ul>
        </li>
        <li><a  href="#">ABOUT</a></li>
        <li><a  href="#">PORTFOLIO</a>
            <ul class="sub-menu">
                <li><a href="#">Sub-Menu 1</a></li>
                <li><a href="#">Level 3 Menu</a>
                    <ul>
                        <li><a href="#">Sub-Menu 4</a></li>
                        <li><a href="#">Sub-Menu 5</a></li>
                        <li><a href="#">Sub-Menu 6</a></li>
                    </ul>
                </li>
            </ul>
       </li>
       <li><a  href="#">BLOG</a></li>
       <li><a  href="#">CONTACT</a></li>
    </ul>
    </nav>
    .menu  > li >  a::before{
        content: "|";
        font-size: 13px;
        padding-right: 5px;
    }
     
     .menu > li > a :first-child{
       content:none;
    }