Kaisaan/kaisaan.github.io
1
Fork 0
mirror of https://github.com/Kaisaan/kaisaan.github.io.git synced 2025-06-18 08:45:38 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

try adding dropdown to navbar

Browse Source
This commit is contained in:
Kaisaan 2023-04-24 11:46:46 -04:00
parent b44ca21d87
commit 0fa8bd5e93
2 changed files with 55 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_includes/nav.html
View File

@ -3,7 +3,14 @@
<ul>
<li class="navstd"><a href="/">Home</a></li>
<li class="navstd"><a href="/pages/about.html">About Me</a></li>
<li class="navstd"><a href="/pages/gaming.html">Gaming</a></li>
<div class="dropdown">
<button class="dropbtn">Gaming
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/pages/gaming.html">Recommendations</a>
</div>
</div>
<li class="navstd"><a href="/pages/contact.html">Contact</a></li>
</ul>
</nav>

48
css/style.css
View File

@ -71,4 +71,50 @@ a:active {
.navstd a:hover {
background-color: #22cc4d;
}
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropbtn {
background-color: #22cc4d;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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;
}