着色下拉菜单

Question

我想在我的黑色导航栏中做一个下拉菜单，但是当我尝试这个时，文本的颜色是蓝色的，如果我点击它，popu 的背景是白色的并且会干扰我的黑色背景，所以我想使其透明。使用引导 v4.1.1

<nav className="navbar navbar-expand-md navbar-dark bg-dark">
                <a className="navbar-brand" href="/home">home</a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
                        aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"/>
                </button>



<div className="collapse navbar-collapse" id="navbarColor01">
    <ul className="navbar-nav mr-auto">
        <li className="nav-item">
            <a className="nav-link" href="/user">Users</a>
        </li>
        <li className="nav-item" >
            <li className="dropdown nav-link">
                <a className="dropdown-toggle" data-toggle="dropdown" href="#">Create new
                    </a>
                <ul className="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
        </li>
    </ul>
</div>
</nav>

所以“新建”必须是白色的，页面链接也必须是白色的。当我点击新建时，带有页面的弓必须是透明的。

我将如何做到这一点？ 我试图把它放在我的 css 中：

.dropdown a{
    color: rgba(255,255,255,.5);
}

但是当我这样做时它可以工作，但是现在当我点击它时页面不会显示，我只是得到一个白框。

谢谢

Answer 1

• 你可以用我的代码替换你的代码开始做 css 一切都会很好地工作

<div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="/user">Users</a>
        </li>
        <ul class="nav-item" >
            <li class="dropdown nav-link">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Create new
                    </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
        </ul>
    </ul>
  </div>

Answer 2

在下拉列表中使用bg-dark 类。此外，您还需要将nav-link 用于“新建”链接，这样它就像navbar-dark 的所有其他链接一样轻。

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="/home">home</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/user">Users</a>
            </li>
            <li class="nav-item">
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Create new
                    </a>
                <ul class="dropdown-menu bg-dark">
                    <li><a href="#" class="nav-link">Page 1-1</a></li>
                    <li><a href="#" class="nav-link">Page 1-2</a></li>
                    <li><a href="#" class="nav-link">Page 1-3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/VKvvHSVl98