nav border prototype

HTML

<nav>
    <ul>
        <li>AUDIT PLANNING
            <div class="sub-nav">
                <ul>
                    <li>nadim 1</li>
                    <li>nadim 2</li>
                    <li>nadim 3</li>
                </ul>
            </div>
        </li>
        <li>nav 2
            <div class="sub-nav">
                <ul>
                    <li>subnav 1</li>
                    <li>subnav 2</li>
                    <li>subnav 3</li>
                </ul>
            </div>
        </li>
        <li>nav 3
            <div class="sub-nav">
                <ul>
                    <li>subnav 1</li>
                    <li>subnav 2</li>
                    <li>subnav 3</li>
                </ul>
            </div>
        </li>
        <li>nav 4
            <div class="sub-nav">
                <ul>
                    <li>subnav 1</li>
                    <li>subnav 2</li>
                    <li>subnav 3</li>
                </ul>
            </div>
        </li>
        <li>nav 5
            <div class="sub-nav">
                <ul>
                    <li>subnav 1</li>
                    <li>subnav 2</li>
                    <li>subnav 3</li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

CSS

nav {
    color: #fff;
    background-color: rgb(55,109,143);
}
nav > ul {
    overflow: hidden;
    list-style: none;

}
nav li {
    float: left;
    width: 20%;
    text-align: center;
    border-bottom: 4px double rgb(11,74,115);
}
nav li:hover {
    border-bottom-style: solid;
    background-color: rgb(11,74,115)
}
nav .sub-nav li {
    background-color: rgb(11,74,115);
    border-bottom: 0;
}

nav .sub-nav {
    position: absolute;
    width: 100%;
    top: 21px;
    left: 0;
}

.sub-nav ul {
    overflow: hidden;
    background-color: rgb(11,74,115);
}