Question

我尝试显示菜单但我不能！我的代码中没有发现问题！有人可以帮帮我吗？

这是css文件！我认为问题来自列表位置！

.user-info .info-container .user-helper-dropdown {
    position: absolute;
    right: -3px;
    bottom: -12px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
}
.dropdown-menu {
    background-color: #fff;
    position: absolute;
    margin-left: -50px;
    display: block !important;
    margin-top: 0 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   
<div class="info-box bg-pink hover-expand-effect" style="width: 285px; top:0%">
    <div class="icon">
        <i class="material-icons">input</i>
    </div>
    <div class="content">
        <div class="text">Mes demandes</div>
        <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="nav-bar-name"></div>
        <div class="btn-group user-helper-dropdown">
            <i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
            <ul class="dropdown-menu pull-right">
                <li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a>
                </li>
                <li role="seperator" class="divider"></li>
                <li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

好的，所以很少有东西 -

首先，您没有导入所需的css文件以使图标起作用。

其次，您正在使用pull-right进行下拉菜单，这将使其在屏幕右侧显示当前代码

第三，你在css中写了display: block !important;，它总是会显示下拉列表，所以我们也会删除它。

像这样的东西

.user-info .info-container .user-helper-dropdown {
    position: absolute;
    right: -3px;
    bottom: -12px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
}

  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="info-box bg-pink hover-expand-effect" style="width: 285px; top:0%">
        <div class="icon">
            <i class="material-icons">input</i>
        </div>
        <div class="content">
            <div class="text">Mes demandes</div>
            <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="nav-bar-name"></div>
            <div class="btn-group user-helper-dropdown">
                <i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
                <ul class="dropdown-menu ">
                    <li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a>
                    </li>
                    <li role="seperator" class="divider"></li>
                    <li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a>
                    </li>
                </ul>
            </div>
        </div>

菜单不起作用

1 个答案: