如何使下拉菜单从左到右看

debugcn 发表于 Dev

YT_Xaos

所以我有一个收件箱，还有一个下拉菜单以显示收件箱，但是下拉菜单向右看，我在topnavbar的右端，所以您几乎看不到下拉菜单，这是CSS的收件箱：

  .notification {
      background-color: #555;
      color: white;
      text-decoration: none;
      position: relative;
      display: inline-block;
      border-radius: 2px;
    }
    
    .notification:hover {
      background: red;
    }
    .notification .badge {
      position: absolute;
      top: -7px;
      right: -10px;
      padding: 5px 10px;
      border-radius: 50%;
      background-color: red;
      color: white;
    } 
    .dropdown {
      position: relative;
      display: inline-block;
      user-select: none;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
      user-select: none;
    }
    .dropdown:hover .dropdown-content {
      display: block;
      user-select: none;
    }

    <div style="float:right;" class="dropdown">
    <span className="span3"></span><a href="#inbox" class="notification">
      <span><img src="https://flounder.epizy.com/images/inbox.png" height="25" width="25"/></span>
    <div class="dropdown-content">
      </div>
      </a>
      </div>

所以idk怎么做，请有人帮忙！

易卜拉欣·尤克塞尔

我做了我能做的。我认为发生了。

 .notification {
      background-color: #555;
      color: white;
      text-decoration: none;
      position: relative;
      display: inline-block;
      border-radius: 2px;
    }
    
    .notification:hover {
      background: red;
    }
    .notification .badge {
      position: absolute;
      top: -7px;
      right: -10px;
      padding: 5px 10px;
      border-radius: 50%;
      background-color: red;
      color: white;
    } 
    .dropdown {
      position: relative;
      display: inline-block;
      user-select: none;
    }
    .dropdown-content {
      display: none;
      background-color: #f9f9f9;
      color: black;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
      user-select: none;
    }
    .dropdown:hover .dropdown-content {
      display: block;
      user-select: none;
    }

 <div style="float:right;" class="dropdown">
    <span className="span3"></span><a href="#inbox" class="notification">
      <span><img src="https://cdn.iconscout.com/icon/free/png-256/left-arrow-8-458424.png" height="25" width="25"/></span>
    <div class="dropdown-content">Merhaba Test
      </div>
      </a>
      </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。