将子菜单添加到帐户图标

时间:2020-06-08 03:25:22

标签: html css

如何创建一个用户帐户来显示我作为其子菜单在线注册和登录? 请帮助我,因为我不知道如何制作帐户图标的子菜单来注册和登录帐户。 请我帮忙。

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  right: 5;
  background-color: black;
  width: 5%;
  z-index: 1;

}
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-a11y="true"></script>
<div class="subnav">
    <a href="#register"><i class="fas fa-user" style="font-size: 16px; color: white;"></i></a>
    <div class="subnav-content">
        <a href="#link1"><i class="fas fa-cash-register"></i></a>
        <a href="#link2"><i class="fas fa-sign-in-alt"></i></a>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

您可以添加弹性显示。我删除了width属性以避免溢出(您可以指定宽度)

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: flex;
  position: absolute;
  right: 5px;
  background-color: black;      
  z-index: 1;
}
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-a11y="true"></script>
<div class="subnav">
    <a href="#register"><i class="fas fa-user" style="font-size: 16px; color: white;"></i></a>
    <div class="subnav-content">
        <a href="#link1"><i class="fas fa-cash-register"></i></a>
        <a href="#link2"><i class="fas fa-sign-in-alt"></i></a>
    </div>
</div>