mirror of
https://github.com/Kaisaan/kaisaan.github.io.git
synced 2025-06-18 16:55:39 -04:00
try adding dropdown to navbar
This commit is contained in:
parent
b44ca21d87
commit
0fa8bd5e93
@ -3,7 +3,14 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li class="navstd"><a href="/">Home</a></li>
|
<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/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>
|
<li class="navstd"><a href="/pages/contact.html">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -71,4 +71,50 @@ a:active {
|
|||||||
|
|
||||||
.navstd a:hover {
|
.navstd a:hover {
|
||||||
background-color: #22cc4d;
|
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;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user