意外覆盖导航栏下拉列表中的默认引导程序样式

Question

基本上我已经编辑了导航栏的默认引导样式，因为我想要一个自定义外观，如下所示：

http://i.imgur.com/vevO4U5.png

但是，我希望在导航栏折叠和菜单下拉时调用继承的引导程序样式，但它继承了普通导航栏中的样式，如下所示：

http://i.imgur.com/6PECxBw.png

所以我真的要问有没有更好或更具描述性的方式来设置普通水平导航栏的样式，所以我不会在下拉菜单中填充默认的引导程序样式。

以下是导致此问题的CSS：

ul.nav {
    width; 100%;
    height: 80px;
}

.nav li a {
    position: relative;
    display: block;
    padding: 32px 0px 5px;
    margin: 0px 15px;
    color: 
}

.nav ul.nav li {
    display: inline;
    height: 100%
}

.nav ul.nav li a {
    display: inline;
    position: relative;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus {
    color: #555;
    background: transparent;
    border-bottom: 1px #555 solid; 
}

以及相关的HTML：

<header>
    <div class="navbar-wrapper"></div>
        <div class="navbar navbar-default" id="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primaryNav" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/"><img src="assets/img/logo.png" alt="Bootstrap to Wordpress"></a>   
                    </div><!-- navbar header -->
                    <div class="navbar-collapse collapse" id="primaryNav">
                        <ul class="nav navbar-nav navbar-right">
                          <li class="active"><a href="/">Home</a></li>
                          <li><a href="#">About</a></li>
                          <li><a href="#">Portfolio</a></li>
                          <li><a href="#">Contact</a></li>
                        </ul>
                    </div><!-- navbar-collapse -->
                </div><!-- navbar-container -->
            </div><!-- navbar-inner -->
        </div><!-- navbar -->
    </div><!-- navbar-wrapper -->
</header>

非常感谢任何帮助。 谢谢 荒地