Отзывчивое абсолютно позиционированное меню

У меня есть jsfiddle здесь - http://jsfiddle.net/jxvg7zvd/30/

Это действительно простой пример навигации с большим меню под 5-й ссылкой.

Большое меню абсолютно расположено под ссылкой, а ссылки внутри него имеют ширину в процентах.

Я хотел бы, чтобы большое меню было отзывчивым, поэтому, когда окно меньше, ссылки внутри меню будут уже.

Поскольку меню абсолютно позиционируется при изменении размера окна, оно не будет изменяться.

Как я могу иметь такое большое меню при наведении курсора, которое является отзывчивым.

    <div class="nav">
        <ul class="top-nav">
            <li><a href="">One</a></li>
            <li><a href="">Two</a></li>
            <li><a href="">Three</a></li>
            <li><a href="">Four</a></li>
            <li class="btn"><a href="">Five</a>
                <div class="mega-nav">
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                </div>    
            </li>
        </ul>

    </div>