Question

有人可以帮我们创建这样的下拉列表，我已经搜索过这种类型，但我发现的是只有国旗的国家的下拉菜单。感谢

请帮助我们

Answer 1

怎么样......

HTML

<body>
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="https://lorempixel.com/75/50/abstract/">
      0123 4567 8912 3456
      <span class="glyphicon glyphicon-chevron-down"></span>
    </button>

    <ul class="dropdown-menu">
      <li class="dropdown-header">Member name (you)</li>
      <li>
        <a href="#" title="Select this card"><img src="https://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
      <li>
        <a href="#" title="Select this card"><img src="https://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
      <li class="dropdown-header">Member name</li>
      <li>
        <a href="#" title="Select this card"><img src="https://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
    </ul>
  </div>
</body>

<强> CSS

body { padding: 40px; }
.dropdown-toggle, .dropdown-menu { width: 300px }
.btn-group img { margin-right: 10px }
.dropdown-toggle { padding-right: 50px }
.dropdown-toggle .glyphicon { margin-left: 20px; margin-right: -40px }
.dropdown-menu>li>a:hover { background: #f1f9fd } /* $search-blue */
.dropdown-header { background: #ccc; font-size: 14px; font-weight: 700; padding-top: 5px; padding-bottom: 5px; margin-top: 10px; margin-bottom: 5px }

Image in dropdown demo

Answer 2

我认为如果你需要简单的下拉html，你可以在link中找到代码。

但是如果你需要高级的js，css，你可以在link

中找到它

有旗帜的国家的货币下拉列表

2 个答案: