Currently, I am working on creating a three-button system to showcase the collectibles in my game's website. I have the buttons prepared, but the one on the right flies off the screen, and the middle button appears misaligned.
My goal is to design a layout where the left button has the dropdown content as is, the middle button has the dropdown content centered, and the right button mirrors the left but transitions from right to left.
You can check out the current website with the 'Collectibles' section located a bit down the home page:
Below is the HTML code for the block: https://pastebin.com/mEECfh2T
Here is the CSS code for the block:
#artifactsButton p {
padding: 5px;
text-align: center;
}
#floraButton p {
text-align: right;
word-wrap: break-word;
}
#collectiblesHeader {
text-align: center;
}
#artifactsButton {
float: left;
}
#floraButton {
float: right;
padding-right: 10px;
}
#lettersButton {
float: right;
padding-right: 290px;
}
.dropbtn {
font-size: 28px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: grey;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
max-width: 500px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}