Question

我有一个我练习的bootstrap模板。在导航栏中有＆＃34; Blog＆＃34;和＆＃34;测试＆＃34;

在测试按钮上，我删除了li class="dropdown "，因为我想尝试创建一个悬停处于活动状态的按钮，例如＆＃34;博客＆＃34;按钮。但是当我将鼠标悬停在测试上时，文本只显示蓝色，而不是白色背景。

我无法弄清楚我是如何做到这一点的？我必须为导航栏上的按钮创建一个CSS类，没有下拉列表。

为了好玩，我试图删除所有的CSS，但悬停仍然在博客按钮上工作。

<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav ">
    <li class="dropdown ">
        <a href="blog-large-image-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">Blog</a>
        <ul class="dropdown-menu">
            <li ><a href="index-blog.html">Blog Home <span class="badge">v1.1</span></a></li>
            <li ><a href="index-blog-2.html">Blog Home 2 <span class="badge">NEW</span></a></li>
        </ul>
    </li>
</ul>
<ul class="nav navbar-nav ">
    <li>
        <a href="blog-large-image-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">Test</a>
        <ul class="dropdown-menu">
            <li ><a href="index-blog.html">Blog Home <span class="badge">v1.1</span></a></li>
            <li ><a href="index-blog-2.html">Blog Home 2 <span class="badge">NEW</span></a></li>
            <li class="dropdown ">
                <a  class="dropdown-toggle" data-toggle="dropdown" href="#">Large Image</a>
                <ul class="dropdown-menu to-left">
                    <li ><a href="blog-large-image-right-sidebar.html">Right Sidebar</a></li>
                    <li ><a href="blog-large-image-left-sidebar.html">Left Sidebar</a></li>
                    <li ><a href="blog-large-image-no-sidebar.html">Without Sidebar</a></li>
                </ul>
            </li>
            <li class="dropdown ">
                <a  class="dropdown-toggle" data-toggle="dropdown" href="#">Medium Image</a>
                <ul class="dropdown-menu to-left">
                    <li ><a href="blog-medium-image-right-sidebar.html">Right Sidebar</a></li>
                    <li ><a href="blog-medium-image-left-sidebar.html">Left Sidebar</a></li>
                    <li ><a href="blog-medium-image-no-sidebar.html">Without Sidebar</a></li>
                </ul>
            </li>
            <li class="dropdown ">
                <a  class="dropdown-toggle" data-toggle="dropdown" href="#">Masonry</a>
                <ul class="dropdown-menu to-left">
                    <li ><a href="blog-masonry-right-sidebar.html">Right Sidebar</a></li>
                    <li ><a href="blog-masonry-left-sidebar.html">Left Sidebar</a></li>
                    <li ><a href="blog-masonry-no-sidebar.html">Without Sidebar</a></li>
                </ul>
            </li>
            <li ><a href="blog-timeline.html">Timeline</a></li>
            <li ><a href="blog-post.html">Blog Post</a></li>
        </ul>
    </li>
</ul>
</div>

Answer 1

要在导航菜单中设置链接样式，您必须根据HTML在CSS文件中添加其中一行（1）如果主父div是.navbar-collapse：

    .navbar-collapse .navbar-nav>li a{background-color:#fff;}

（2）如果主要父母是Navbar-default：

    .navbar-default .navbar-nav>li a {background-color:#fff;}

（3）如果主要父母是navbar-inverse：

     .navbar-inverse .navbar-nav>li a{background-color:#fff;}

这样的东西取决于主要的父类和带有ul标签的类

下拉列删除

1 个答案: