每个循环仅显示第一个值

我正在尝试创建一个动态的导航栏。但是目前，它的唯一列出的第一个li甚至输入了1个以上

    var liCount = $('.navLiName').length;
    var liName = $('.navLiName').val();

    for($i = 0; $i < liCount; $i++){
        var lis = '<li class="pi-nav-li">'+liName+'</li>';
    }

    $('.preview').append('<nav class="pi-nav">'+lis+'</nav>');

这是HTML

<input type="text" class="navLiName" /> 
<input type="text" class="navLiName" />
<input type="text" class="navLiName" />

因此，当我输入上述文本字段时：“关于”，“服务”和“联系”，它将像这样输出

<nav>
<li>About</li>
</nav>

但应该如此。我做错了什么

<nav>
<li>About</li>
<li>Service</li> 
<li>Contact</li>
</nav>