Я пытаюсь сделать выпадающий список на моей вертикальной панели навигации.Буду очень признателен, если вы поможете мне придумать, как создать раскрывающийся список.
Я попытался исследовать и искать разные коды для своего проекта.Вот некоторые вещи, которые я попробовал в своем коде.
Мой HTML-код:
<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 href="#" target="_blank" rel="nofollow">
<a >Introduction</a>
</li>
<li href="#" target="_blank" rel="nofollow">
<a >Mission</a>
</li>
<li href="#" target="_blank" rel="nofollow">
<a >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>
Мой код CSS:
.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%;
}
.side-menu-wrapper > ul > li > a {
display: block;
border-bottom: 1px solid black;
padding: 6px 4px 6px 4px;
color: white;
transition: 0.3s;
text-decoration: none;
}
.side-menu-wrapper > a.menu-close {
padding: 8px 0 4px 23px;
color: white;
display: block;
margin: -30px 0 -10px -20px;
font-size: 35px;
text-decoration: none;
}
.menu-overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
overflow-y: auto;
overflow-x: hidden;
text-align: center;
opacity: 0;
transition: opacity 1s;
}
Результат: 
Thx Btw