Bootstrap Nav-pills主动将颜色变为透明

Question

嗨我想改变颜色 - 导航丸的活跃状态，但不知何故它没有改变，我尝试给元素的id和！对背景颜色很重要但没有任何帮助也尝试使用样式TAG应该覆盖everithing但没有改变了：/

.nav-tabs > li, .nav-pills > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills { 
background-color: transparent;
text-align:center;
}
#nav>li>a {
margin: 0 55px 0 0;
}
#nav>li>a:hover,
#nav>li>a:focus,
#nav>li>a:active{
text-decoration: none;
color: purple;
background-color: transparent!important;
border-bottom: purple 1px solid;
 }

html：

<div class="col-md-8" style="margin-top: 55px;">
        <ul class="nav nav-pills" id="nav">
            <li><a data-toggle="tab" href="#home">UKÁŽKA PREMENY ŽIEN</a></li>
            <li><a data-toggle="tab" href="#menu1">ČO VÁM PONÚKAME</a></li>
            <li><a data-toggle="tab" href="#menu2">AKO TO ROBÍME</a></li>
        </ul>

        <div class="tab-content text-center">
            <div id="home" class="tab-pane fade in active">
                <h3>HOME</h3>
                <p>Some content.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Some content in menu 1.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Some content in menu 2.</p>
            </div>
        </div>
    </div>

屏幕：