Adding a Hoverable Dropdown
If you wish to create 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>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
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: lightpink;
width: auto;
height: auto;
}
.span2 {
border-radius: 5px;
border: dotted;
border-color: black;
line-height: 2em;
margin-right: 15px;
text-align: center;
background-color: lightgreen;
}
.span3 {
border-radius: 5px;
border: solid;
line-height: 2em;
margin-right: 15px;
text-align: center;
background-color: lightblue;
}
.dropdown .span1:hover {
background-color: lightgrey;
display: none;
position: absolute;
background-color: white;
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: lightpink;
width: auto;
height: auto;
}
.span2 {
border-radius: 5px;
border: dotted;
border-color: black;
line-height: 2em;
margin-right: 15px;
text-align: center;
background-color: lightgreen;
}
.span3 {
border-radius: 5px;
border: solid;
line-height: 2em;
margin-right: 15px;
text-align: center;
background-color: lightblue;
}
.dropdown .span1:hover {
background-color: lightgrey;
</style>
<div class="background">
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="row">
<div class="col col-span-4">
<div class="dropdown">
<p class="span1">Bacon ipsum dolor amet pig capicola tenderloin, rump tri-tip t-bone ham hock
shank alcatra ground round short loin shankle jerky venison corned beef. Tongue jowl salami
meatloaf andouille strip steak pork jerky beef ribs sirloin drumstick ball tip. Hamburger chicken kevin
andouille brisket. Strip steak alcatra chicken, fatback t-bone jowl pork belly.</p>
<div class="dropdown-content">
<p>Does your lorem ipsum text long for something a little meatier? Give our generator a try…
it’s tasty!</p>
</div>
</div>
</div>
<div class="col col-span-4">
<div class="dropdown">
<p class="span2">Bacon ipsum dolor amet pig capicola tenderloin, rump tri-tip t-bone ham hock
shank alcatra ground round short loin shankle jerky venison corned beef. Tongue jowl salami
meatloaf andouille strip steak pork jerky beef ribs sirloin drumstick ball tip. Hamburger chicken kevin
andouille brisket. Strip steak alcatra chicken, fatback t-bone jowl pork belly.</p>
<div class="dropdown-content">
<p>Does your lorem ipsum text long for something a little meatier? Give our generator a try…
it’s tasty!</p>
</div>
</div>
</div>
<div class="col col-span-4">
<div class="dropdown">
<p class="span3">Bacon ipsum dolor amet pig capicola tenderloin, rump tri-tip t-bone ham hock
shank alcatra ground round short loin shankle jerky venison corned beef. Tongue jowl salami
meatloaf andouille strip steak pork jerky beef ribs sirloin drumstick ball tip. Hamburger chicken kevin
andouille brisket. Strip steak alcatra chicken, fatback t-bone jowl pork belly.</p>
<div class="dropdown-content">
<p>Does your lorem ipsum text long for something a little meatier? Give our generator a try…
it’s tasty!</p>
</div>
</div>
</div>
</div>
</div>