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

2023年9月10日 211次阅读

我有一个我正在练习的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>

最佳答案 要在导航菜单中设置链接样式,您必须根据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标签的类

点赞