html - 有没有更好的方法来折叠这个导航栏

Question

我想知道是否有更好的方法来折叠此页面上显示的导航栏 http://reportalert.info/index-test.php

因为当它折叠时，它会分成两行，而且由于每个列表项右侧的边框，它看起来不太好。有没有一种方法可以使列表项在折叠时显示在同一行上，或者有另一种方法可以使它在较小的屏幕上查看时看起来更好。

此外，当悬停在链接上时，它与导航栏的高度不同，我尝试更改填充，但这会在移动布局上创建一个垂直滚动条，我该如何解决这个问题。

这是我的导航栏代码:

.navbar-default {
    background-color: #fff;
    background-image: -moz-linear-gradient(top, #B0B0B0, #797979);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B0B0B0), to(#797979));
    background-image: -webkit-linear-gradient(top, #B0B0B0, #797979);
    background-image: -o-linear-gradient(top, #B0B0B0, #797979);
    background-image: linear-gradient(to bottom, #B0B0B0, #797979);
    background-repeat: repeat-x;
    border:0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B0B0B0', endColorstr='#797979', GradientType=0);
    *zoom: 1;
    *display: inline;
    }

.navbar-default .navbar-nav > li {
    padding:0 8px;
    border-right:1px solid #bbb;
    font-size:19px;
    color:#f7f7f7;
    font-family: 'RBNo21b-Book';
    text-decoration:none;
    font-weight:bold;
    letter-spacing:1px;
    }

.navbar-default .navbar-nav > li > a {
    padding:13px 19px 15px 19px;
    } 

.navbar-default .navbar-nav > li:hover {    
    background-image: -moz-linear-gradient(top, #797979, #B0B0B0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#797979), to(#B0B0B0));
    background-image: -webkit-linear-gradient(top, #797979, #B0B0B0);
    background-image: -o-linear-gradient(top, #797979, #B0B0B0);
    background-image: linear-gradient(to bottom, #797979, #B0B0B0);
    background-repeat: repeat-x;
    border:0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#B0B0B0', GradientType=0);
    *zoom: 1;
    *display: inline;
    color:#fff;
    padding:0 8px;
    border-right:1px solid #bbb;
    }

预先感谢您的帮助

Answer 1

关于悬停，使用填充:

.navbar-default .navbar-nav > li > a {
    padding:15px 19px 15px 19px;
} 

要修复滚动条，只需覆盖 .navbar-collapse 的最大高度

.navbar-collapse {
    max-height: 100%;
}