Question

我的网站上有下拉菜单。这是代码

 <nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
    <div class="container" style="height:80px;">
        <div class="navbar-header" style="">
            <button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
                <i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>

            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="">
                    <a class="page-scroll" href="#about">О нас</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="">
                    <a class="page-scroll" href="@Url.Action("Courses","Home")">Курсы</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="">
                    <a class="page-scroll" href="@Url.Action("Development","Home")">Разработка</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="active">
                    <a class="page-scroll" href="#contact">Контакты</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="active">
                    <a class="page-scroll" href="@Url.Action("Index","Blog")">VR Блог</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

现在透明了。我尝试将背景改为红色。

这是bootstrap css的代码

   .navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: red;
}

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
    margin-bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: red;
}

但它仍然保持透明。我不明白哪里有问题？

如何更改下拉菜单的背景颜色？

Answer 1

请在此处查看：https://jsbin.com/hekaxexeki/edit?html,css,output

.navbar-collapse.collapse.in{
  background-color:lightgreen;
}

Answer 2

工作片段：

＆＃13;

   .navbar-nav > li {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: red;
}

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
    margin-bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 <nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
    <div class="container" style="height:80px;">
        <div class="navbar-header" style="">
            <button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
                <i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>

            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="">
                    <a class="page-scroll" href="#about">О нас</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="">
                    <a class="page-scroll" href="@Url.Action("Courses","Home")">Курсы</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="">
                    <a class="page-scroll" href="@Url.Action("Development","Home")">Разработка</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="active">
                    <a class="page-scroll" href="#contact">Контакты</a>
                </li>
                <li style="padding-top:10px;font-size:20px;" class="active">
                    <a class="page-scroll" href="@Url.Action("Index","Blog")">VR Блог</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

＆＃13;

Answer 3

您没有使用选择器处理任何现有元素。试试这个：

{{1}}

Answer 4

您需要做的就是将此内容写入您创建的CSS

.navbar{background-color : red;}

更改折叠菜单的背景颜色

4 个答案: