Untitled


    <html>
    <head>
    <style>
    nav {
            background: blue;
            /*overflow: hidden;*/
            height: 25px;
    }
    div {
            background: red;
            max-width: 260px;
            float: left;
            transition: all 5s;
            overflow: hidden;
    }
    div:hover {
            max-width: 10000px;
    }
    span {
            display: block;
            height: 25px;
    }
    a {
            background: green;
            float: left;
            display: block;
            width: 130px;
            height: 25px;
            line-height: 25px;
    }
    </style>
    <script>
            window.onload = function(){
                    var s = document.querySelectorAll('span');
                    for(var i=0; i<s.length; i++){
                            s[i].style.width = 130*s[i].children.length;
                    }
            }
    </script>
    </head>
    <body>
            <nav>
                   <div>
                            <span>
                                    <a href='#'>Test</a>
                                    <a href='#'>Test 1</a>
                                    <a href='#'>Test 2</a>
                            </span>

                    </div>
            </nav>
    </body>
    </html>