5 Drop Downs

This drop down is comprised of 4 different design specifications.

1. Design (in CSS)
2. Design Hover Specifications
3. Summary (the name of the dropdown)
4. Design Paragraphs

Put the below code into your custom CSS ( REMOVE THE PURPLE TEXT):

/*Start Dropdown Code*/

details {
background: #d1e6ec; <-Color of the “button”
padding: 1em 1em 1em 1em; <-extra space around text
margin: 0.9em 0 0.9em 0; <- where the “button” edge is
border-radius: 1em; <- the curve of the “button”
cursor: pointer; <- this changes the cursor to be a hand
display: inline-block; <-this limits the width of the button to the width of the text. You can make the button the width of the page by just writing “block”
position: relative; <-this tells the webpage where to put the box. You can change this to make the button centered or whatnot.
transition: 0.15s background linear; <-this specifies how fast the dropdown opens
}
details:hover, <-gives the ability for the button to recognize when the cursor is over it
details:focus { <-this is the condition for WHEN the cursor is over it
background: #d4d1ec; <- in this case, when the condition is met, the button changes to this specified color.
}

summary { <-This is the text display of the drop down.
padding: 10px;
font-family: “Lato”, “Helvetica”, sans-serif;
font-size: 0.9em;
font-style: normal;
font-weight: bold;
line-height: 1.1em;
text-align: left;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
border-style: none;
border-width: 0.05em;
border-radius: 0;
}
details p { <-this section specifies the text that is nestled under the drop down. You could make it italics, a different font, whatever suits yourself.
cursor: auto; <- specifies what type of cursor happens when you mouse over it. Auto is the normal one. You could make it special by using a hand or other options.
background: none; <-this is the background for the text itself, so if you want it a different color you can. But it really only looks good for one paragraph.
padding: 15px;
}

/*End Dropdown Code*/