I'm using Bootstrap to build a drop-down menu for one of my tabs in the navbar. I'm trying to customize it; however, there is always this blue box that hovers the tab after I click the tab.

It doesn't happen if I don't click the tab at all, but it happens after clicking it once and hovering my mouse over the same tab. The same thing happens in the submenu.

I've tried different ways to override the CSS, but it's not working. Here's my code for the navbar. How do I override this?

 <nav class="navbar">
        <div class="navbar-inner">
            <a href="#" class="brand"><div id="brand_font">Christina Yang</div></a>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-home"></i>home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-comment"></i>blog</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-info-sign"></i>about</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-camera"></i>photography</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dro
twitter-bootstrap drop-down-menu navbar navigationbar
Edit
Report