Confused about setting width for jquery dropdown

With help from tutorials I have produced this code shown below. Where I have got stuck is that I don't want it to be 100% width. I only want the button to have 20px padding either side of the text. Then I want the dropdown that comes up to take up whatever width it needs to with 20px either side of the max width too.

Can anyone help me do this? I tried assigning padding: 20px to the ul but it didn't work.

$(function () {
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .js').click(function (e) {
        $('.click-nav .js ul').toggle();
        $('.clicker').toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function () {
        if ($('.click-nav .js ul').is(':visible')) {
            $('.click-nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
        }
    });
});

* {margin: 0; padding: 0;}
.click-nav ul {
    position:relative;
}
.click-nav ul li {
    position:relative;
    list-style:none;
    cursor:pointer;
}
.click-nav ul li ul {
    position:absolute;
    left:0;
    right:0;
}
.click-nav ul .clicker {
    position:relative;
    color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
    background:#196F9A;
}
.click-nav ul li a {
    display:block;
    padding:8px 10px;
    background:#FFF;
    color:#333;
    text-decoration:none;
}
.click-nav ul li a:hover {
    background:#F2F2F2;
}
/* Fallbacks */
 .click-nav .no-js ul {
    display:none;
}
.click-nav .no-js:hover ul {
    display:block;
}

<script src="http://ift.tt/1q8wkLp"></script>
<div class="click-nav">
    <ul class="no-js">
    <li> <a href="#" class="clicker">Any Time</a>

        <ul>
            <li><a href="#">Any Time</a>
            </li>
            <li><a href="#">Past 3 days</a>
            </li>
            <li><a href="#">Past 5 days</a>
            </li>
        </ul>
    </li>
</ul>
</div>