Question

我有一张图片，我想知道如何将其制作成一个下拉容器。

我对此有任何帮助

＆＃13;

.fa-chevron-circle-down {
  position: absolute;
  right: 26%;
  top: 28px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-chevron-circle-down" aria-hidden="true" style="font-size: 25px; cursor: pointer;"></i>

＆＃13;

Answer 1

这是一个例子。按钮和菜单都在容器中。菜单由css隐藏，但是当您将鼠标悬停在容器上时会显示。这种方式将鼠标悬停在按钮上会显示菜单，当鼠标退出菜单时会隐藏它。

你真的需要做更多的研究 - 我正在低估这个问题。

＆＃13;

#menu {
  position: absolute;
  top: 28px;
  right: 26%;
}

.fa-chevron-circle-down {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
  height:28px;
}

ul {
  position: absolute;
  right: 0;
  top: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

li {
  padding: 5px;
}

li:nth-of-type(even) {
  background: #ddd;  
}
li:nth-of-type(odd) {
  background: #eee;  
}

#menu:hover ul {
 display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="menu">
  <i class="fa fa-chevron-circle-down" aria-hidden="true" style="font-size: 25px; cursor: pointer;"></i>
  <ul>
    <li><a href="#">This</a></li>
    <li><a href="#">Is</a></li>
    <li><a href="#">One</a></li>
    <li><a href="#">Approach</a></li>
  </ul>
</div>

＆＃13;

下拉内容图片

1 个答案: