CCF_100/frontpage
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Center the dropdown text relative to its parent, also make sure that the button text stays on a single line.

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️ 2024-03-22 22:24:45 -05:00
parent 1a4d72666b
commit c54d4c97f8
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -38,19 +38,19 @@
<div class="dropdown"/>
<button class="dropbtn button">Minecraft Server Dynamic Maps</button>
<div class="dropdown-content navborder">
<a class="button" href="https://survival.calebfontenot.com">Survival Server</a>
<a class="button" href="https://creative.calebfontenot.com">Creative Server</a>
<a class="button" href="https://modded.calebfontenot.com">Modded Server</a>
<a class="button" href="https://skyfactory.calebfontenot.com">Skyfactory Server</a>
<a class="button dropdownButton" href="https://survival.calebfontenot.com">Survival Server</a>
<a class="button dropdownButton" href="https://creative.calebfontenot.com">Creative Server</a>
<a class="button dropdownButton" href="https://modded.calebfontenot.com">Modded Server</a>
<a class="button dropdownButton" href="https://skyfactory.calebfontenot.com">Skyfactory Server</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn button">WASM Games</button>
<div class="dropdown-content navborder">
<a class="button" href="mario">Mario</a><br>
<a class="button" href="sonic1">Sonic 1</a><br>
<a class="button" href="sonic2">Sonic 2</a><br>
<a class="button" href="soniccd">Sonic CD</a>
<a class="button dropdownButton" href="mario">Mario</a><br>
<a class="button dropdownButton" href="sonic1">Sonic 1</a><br>
<a class="button dropdownButton" href="sonic2">Sonic 2</a><br>
<a class="button dropdownButton" href="soniccd">Sonic CD</a>
</div>
</div>
</div>

16
root.css
View File

@ -109,18 +109,28 @@ ul {
position: relative;
display: inline-block;
border-radius: 2%;
margin: 0 auto;
}
.dropdown-content {
position: absolute;
display: none;
padding: 10px;
z-index: 10;
background-color: rgba(0,0,0,0.6);
margin: auto;
text-align:center;
left: 50%;
transform: translateX(-50%);
}
.dropdown:hover .dropdown-content {display: grid;}
.dropdown:hover .dropdown-content {
display: grid;
}
.dropdownButton {
white-space: nowrap;
}