Christech Christech - 7 months ago 105
CSS Question

Dropdown content image

I have an image I was wondering how do I make it into a dropdown container.

Im new to this any help



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

<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>




Answer Source

Here's an example. The button and the menu are both in a container. The menu is hidden by css, but shown when you are hovering over the container. This way hovering over the button shows the menu and it is hidden when the mouse exits the menu.

You really need to do more research - I'm downvoting the question.

#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;
}
<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download