<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown Menu 03</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="accordion-container">
<div class="main-item">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 14c0 1.657 2.686 3 6 3s6 -1.343 6 -3s-2.686 -3 -6 -3s-6 1.343 -6 3z"></path>
<path d="M9 14v4c0 1.656 2.686 3 6 3s6 -1.344 6 -3v-4"></path>
<path d="M3 6c0 1.072 1.144 2.062 3 2.598s4.144 .536 6 0c1.856 -.536 3 -1.526 3 -2.598c0 -1.072 -1.144 -2.062 -3 -2.598s-4.144 -.536 -6 0c-1.856 .536 -3 1.526 -3 2.598z"></path>
<path d="M3 6v10c0 .888 .772 1.45 2 2"></path>
<path d="M3 11c0 .888 .772 1.45 2 2"></path>
</svg>
Payments
<svg
xmlns="http://www.w3.org/2000/svg"
class="expand-icon"
width="44"
height="44"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 6l6 6l-6 6" />
</svg>
</div>
<ul>
<li>
<div class="line-vertical"></div>
<div class="line-horizontal"></div>
<a href="#income" title="Income">
Income
</a>
</li>
<li>
<div class="line-vertical"></div>
<div class="line-horizontal"></div>
<a href="#expenses" title="Expense">
Expenses
</a>
</li>
<li>
<div class="line-vertical"></div>
<div class="line-horizontal"></div>
<a href="#statements" title="Statements">
Statements
</a>
</li>
<li>
<div class="line-vertical"></div>
<div class="line-horizontal"></div>
<a href="#payouts" title="Payouts">
Payouts
</a>
</li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>