如何在导航栏中使用多个下拉菜单？

我有一个带有图标的导航栏，我希望2个图标具有单独的下拉菜单。这是我的代码：

<div class="master-menu-right-wrapper">
    <div class="master-menu-right-item"><i class="icon-notifcation"></i></div>
    <div class="master-menu-right-item" id="add-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-add"></i></div>

    //this is not working
    <div class="dropdown-menu master-menu-dropdown" aria-labelledby="add-menu">
        <a class="dropdown-item" href="#">New member</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">New admin</a>
    </div> //this is not working

    <div class="master-menu-right-item"><i class="icon-setting"></i></div>
    <div class="master-menu-right-item master-menu-right-user">
        <div class="master-menu-right-user-font">Username</div>
    </div>
    <div class="master-menu-right-item" id="app-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-user"></i></div>
    //works
    <div class="dropdown-menu master-menu-dropdown" aria-labelledby="app-menu">
        <label>Welcome</label>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">App 1</a>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary mr-5">Save</button>
            <button type="button" class="btn btn-dark">Edit profile</button>
        </div>
        //works
    </div>
</div>

当我添加一个下拉菜单时，单击用户图标，其效果会下降。当我添加第二个下拉菜单时，它将覆盖前一个下拉菜单，而我没有得到两个单独的下拉菜单。

注意

我不需要嵌套的下拉菜单或多级菜单。每个图标只有2个单独的下拉菜单。

我已经尝试过以下解决方案：

每个按钮组有多个下拉菜单？

这对我不起作用，因为样式会弄乱。

每个图标如何有两个下拉菜单？

更新：

更新：

CSS代码：

 .master-menu-right-wrapper {
            float: right;
            width: auto;
            text-align: right;
            cursor: pointer;
            user-select: none;
        }

        .master-menu-right-item {
            display: inline-block;
            padding-top: 4px;
            height: 48px;
            font-size: 1.6rem;
            text-align: center;
        }


        .master-menu-right-user-font {
            display: inline-block;
            font-size: 1rem;
        }

        .master-menu-right-user {
            margin-top: -10px;
            padding-left: 10px;
            border-left: thin solid #041348;
        }