Html 右侧的汉堡包菜单下拉列表

当我点击汉堡包菜单时，我试图将其定位在右边，但我没有为此调整CSS

我有这个

HTML

代码：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header">
        <p class="navbar-text navbar-right">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>

如何调整此CSS，使汉堡菜单在单击时位于右侧？框的填充必须与框中单词的大小相适应。像这样：

如果它覆盖了它下面的空间就可以了。

我需要一个仅使用此

CSS

代码的解决方案。看更多

---

谢谢。

将选择器中的collapse.in更改为

.collapse.in{
    display:block !important;
    position:absolute;
    float:right;
    right: 0;
}

---

好的，但背景色消失，整个导航栏出现在菜单位于右侧之前。如何调整？谢谢。添加背景：继承！重要的；宽度：自动导航栏的效果不会消失。它在菜单位于右侧之前完整显示。请检查：，这是我在那一小时内可能出现的内容。。我建议您将颜色指定给.navbar折叠选择器，就像我为其指定了背景色一样。希望能有点帮助

.collapse.in{
    display:block !important;
    position:absolute;
    float:right;
    right: 0;
}