Adding an arrow layout with 5 elements
If you wish to create an arrow layout, with a hoverable dropdown, that will look as follows, follow the steps indicated.
Create a Raw HTML and enter the following code:
<head>
<meta charset=”UTF-8”>
<link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/videofrance/fb-grid_V2.css">
</head>Without this code, you won’t be able to have a column layout.
Create another Raw HTML, and copy and paste the following HTML code and change the elements highlighted in blue.
<style type="text/css">
.dropdown {
position: relative;
display: inline-block;
width:85% !important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.span1 {
border-radius: 5px;
border: dotted;
line-height: 2em;
margin-right: 15px;
text-align: center;
background-color: lightgrey;
width: auto;
height: auto;
}
.span2 {
border-radius: 5px;
border: dotted;
border-color: pink;
line-height: 2em;
margin-right: 15px;
text-align: center;
background-color: green;
}
.span3 {
border-radius: 5px;
border: solid;
line-height: 2em;
margin-right: 15px;
text-align: center;
background-color: orange;
}
.dropdown .span1:hover {
background-color: green;
}
.dropdown .span2:hover {
background-color: green;
}
.dropdown .span3:hover {
background-color: green;
}
.dropdown:hover .dropdown-content {
display: block;
border-radius: 15px;
background-color: green;
}
.arrow {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position:0px 35%;
background-image:url('/static/yellow-arrow-right-476x260.png');
background-color:transparent !important;
}
.arrow .col {
background-color:transparent !important;
}
</style>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="row arrow">
<div class="col col-span-2">
<div class="dropdown">
<p class="span1">Hi there! Move your mouse over here ;) </p>
<div class="dropdown-content">
<p>Well done!</p>
</div>
</div>
</div>
<div class="col col-span-2">
<div class="dropdown">
<p class="span1">Hi there! Move your mouse over here ;) </p>
<div class="dropdown-content">
<p>Well done!</p>
</div>
</div>
</div>
<div class="col col-span-2">
<div class="dropdown">
<p class="span2">Hi again ! Guess what have in common...</p>
<div class="dropdown-content">
<p>Learning Tribes!</p>
</div>
</div>
</div>
<div class="col col-span-2">
<div class="dropdown">
<p class="span3">Please help, what color is the arrow? </p>
<div class="dropdown-content">
<p>Yellow!</p>
</div>
</div>
</div>
<div class="col col-span-2">
<div class="dropdown">
<p class="span1">Hi there! Move your mouse over here ;) </p>
<div class="dropdown-content">
<p>Well done!</p>
</div>
</div>
</div>
</div>