HTML:
CSS:
<div class="dropdown">
<p><button class="dropbtn">Basic Coding Review</button></p>
<div class="dropdown-content">
<a href="https://guides.hsict.library.utoronto.ca/basiccoding/html ">HTML Section</a>
<a href="https://guides.hsict.library.utoronto.ca/basiccoding/css">CSS Section</a>
<a href="https://guides.hsict.library.utoronto.ca/basiccoding/libguideelements">CSS & LibGuide Elements</a>
<a href="https://guides.hsict.library.utoronto.ca/basiccoding/embed">Widgets & Embedding</a>
</div>
</div>
<style>
.dropbtn {
background-color: #0f2047;
color: #ffffff;
padding: 10px;
font-size: 28px;
font-weight: bold;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d3d3d3;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
font-weight: bold;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #15316b;}
</style>