Seeking your expertise in creating a dropdown list for my vertical navbar. Any ideas on how to achieve this?
I have been exploring various code options for my project. Here's a snippet of what I've tried:
https://i.sstatic.net/crSIO.png
Here is the HTML Code snippet:
<div class="menu-overlay"></div>
<div class="side-menu-wrapper">
<a href="#" class="menu-close">×</a>
<ul>
<li>
<form class="example"action="action_page.php">
<input type="text" placeholder="Search.."
name="search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</li>
<li>
<a href="Index.html" target="_blank"
rel="nofollow">Home</a>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">About</a>
<ul>
<li>
<a href="#" target="_blank" rel="nofollow">Introduction</a>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">Mission</a>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">Vision</a>
</li>
</ul>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">Facebook</a>
</li>
<li>
<a href="#" target="_blank"
rel="nofollow">Flickr</a>
</li>
</ul>
</div>
And here's the CSS Code snippet:
.side-menu-wrapper {
background: rgba(0,114,187,0.7);
padding: 40px 0 0 40px;
position: fixed;
top: 0;
right: 0;
height: 100%;
z-index: 2;
transition: 0.5s;
width: 250px;
font: 20px "Courier New", Courier, monospace;
box-sizing: border-box;
}
.side-menu-wrapper > ul{
list-style:none;
padding:0;
margin:0;
overflow-y: auto;
height:95%;
}
/* More CSS styles... */
Final Result Image: https://i.sstatic.net/H3ARX.png
Thanks for your help!