html - 下拉类删除后悬停不起作用

Question

我有一个正在练习的 Bootstrap 模板。在导航栏中有“博客”和“测试”

在测试按钮上，我删除了 li class="dropdown "，因为我想尝试制作一个悬停处于事件状态的按钮，就像在“博客”按钮上一样。但是当我将鼠标悬停在测试上时，文本只显示蓝色，不是白色背景。

我无法弄清楚如何让它发挥作用？我必须为导航栏上的按钮创建一个 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 标签的类