Question

实际上，我有导航栏，并且我在w3schools.com的锚标记中添加了class="dropdown-toggle" data-toggle="dropdown"，因此它仍然没有显示箭头。将鼠标悬停在导航栏上可以正常工作，但是箭头没有显示。

html file
     <div class="dropdown">
             <a class="mega-menu-link dropbtn">Selection<span class="mega-indicator"></span></a>
                <div class="dropdown-content">
            <a routerLink="add-selection"  routerLinkActive="active">Create Selection <span class="mega-indicator"></span></a> 
           <a routerLink="show-selection" routerLinkActive="">Show All Selection <span class="mega-indicator"></span></a>

      </div>
             </div>

css文件

.dropbtn {
    background-color: #4CAF50;
    color: #fff !important;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

Answer 1

只需将类添加到标签“ dropdown-toggle”以显示下拉箭头

.dropbtn {
    background-color: #4CAF50;
    color: #fff !important;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">
             <a class="mega-menu-link dropbtn dropdown-toggle">Selection<span class="caret"></span></span></a>
                <div class="dropdown-content">
            <a routerLink="add-selection"  routerLinkActive="active">Create Selection <span class="mega-indicator"></span></a> 
           <a routerLink="show-selection" routerLinkActive="">Show All Selection <span class="mega-indicator"></span></a>

      </div>

引导4中导航栏中的鼠标悬停时未显示箭头

1 个答案: