Как правильно свертать блок? Пропадает бордер.

Есть блок с кодом ниже:

Код:

<div class="page-nav">
                <ul>
                    <li><a href="#">All</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li class="active"><a href="#">Marketing</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Branding</a></li>
                    <li><a href="#">Print</a></li>
                    <li><a href="#">Photography</a></li>
                </ul>
            </div>

Со стилями:

Код:

.page-nav{
    background: url('images/naklon-bg.jpg');
    padding: 5px 0;
    margin:0 30px 50px 30px;
}
    .page-nav ul{
        overflow: hidden;
        background: #fff;
    }
        .page-nav ul li{
            float: left;
            list-style: none;
                       
        }
            .page-nav ul li a{
                color: #333;
                display: block;
                font-family: 'pt_sans';
                font-size: 15px;
                margin:5px 20px 0 20px;
                text-decoration: none;              
            }
            .page-nav ul li.active a{
                border-bottom: 4px solid #d29624;              
            }
            .page-nav ul li a:hover{
                border-bottom: 4px solid #d29624;
            }

Выход такой:


Хочу, чтобы желтый бордер под Marketing наложился на серый бордер. Т.е. тег li или a с прозрачным фоном вышел из ul вниз на 5px.

Сделал так:

Код:

.page-nav ul li a {
    color: #333;
    display: block;
    font-family: 'pt_sans';
    font-size: 15px;
    margin: 5px 20px 0 20px;
    text-decoration: none;
    position: relative;
    top: 3px;
    z-index: 1000;
}

Но бордер пропадает, уходит под .page-nav:

Как наложить бордер сверху серого фона?

 

Снизу есть серая полоска типа ресничек. "a" имеет желтый бордер. Когда опускаю "а"(ссылку через position relative на 5px) бордер уходит под серую полоску (т.е. его не видно становиться), я хочу наложить на серую полоску сверху.

 

Не пробовали применить z-index? Чтобы была поверх всего?