To achieve the desired effect in the header, I need to create two expandable dropdown menus for the first two titles. My coding experience is limited, especially when it comes to javascript and jquery. Currently, I have managed to create the effect for one button (https://gyazo.com/c8abca5a6c73fc5e4856e85727b57b55), but when I attempt to add a second one, they end up overlapping, losing their format, and appearing in the wrong positions.
Check out the Codepen link here: https://codepen.io/valik140795/pen/qadXOo
Below is the code snippet for the header containing 2 dropdowns and 2 normal titles:
<ul>
<style>
.dropbtn {
background-color: #282828;
color: #AA9568;
padding: 0px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #282828;
}
.dropdown {
position: absolute;
z-index: 999;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 50%;
left: 5px;
z-index: 998;
background-color: #282828;
min-width: 180px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #AA9568;
padding: 3px 5px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #282828}
// More styles and script...
</style>
<li>|</li>
<li><a href="http://www.123contactform.com/form-2178643/My-Form">Collaboration</a></li>
<li>|</li>
<li><a href="contact.html">Contacts</a></li>
</ul>
</div>
I understand that this may not be the cleanest code, but as a beginner still learning, I appreciate your understanding. Thank you in advance!