Dropdown - pure css dropdown

---

>

Css Dropdown HTML

My Dropdown 1

expand_more

• Link 1
• Link 2
• Link 3
• Link 4

My Dropdown 2

expand_more

• Link 1
• Link 2
• Link 3
• Link 4

Code <!DOCTYPE html> <html lang="en"> <head> <title>Grapevine</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> body{font-family:sans-serif;background: #0fc4ff; padding:25px;} .main-heading{text-align: center; font-size: 30px; padding: 12px; color: #fefb0f;margin-bottom:15px;} .drpbox{ background-color: #FFF; border-radius: 10px; margin:30px 0px; user-select:none; width:100%; position: relative; } .drp-header{ font-size: 30px; padding: 10px; color: #5c5c5c; display: flex; align-items: center; cursor:pointer; } .drp-name{flex-grow:1} .drp-icon{font-size:30px} .drp-content{ display:none; padding: 0px; margin: 0px; border-top: 1px solid #ededed; list-style:none; position: absolute; background: #fff; width: 100%; top: 100%; left: 0px; border-radius: 10px; z-index:1; overflow: hidden; } .drp-content>li{ color: #fff; } .drp-content>li>a{ color: #858585; text-decoration: none; font-size: 30px; display: block; padding: 10px; } .drp-content>li>a:hover{background:#ededed} .drpbox:hover .drp-content{display:block;} .drpbox:hover .drp-icon{transform:rotate(180deg);} </style> </head> <body> <div class="main-heading">Css Dropdown </div> <div class="drpbox"> <div class="drp-header"><div class="drp-name">My Dropdown 1</div> <i class="material-icons drp-icon">expand_more</i></div> <ul class="drp-content"> <li><a href="#!">Link 1</a></li> <li><a href="#!">Link 2</a></li> <li><a href="#!">Link 3</a></li> <li><a href="#!">Link 4</a></li> </ul> </div> <div class="drpbox"> <div class="drp-header"><div class="drp-name">My Dropdown 2 </div> <i class="material-icons drp-icon">expand_more</i></div> <ul class="drp-content"> <li><a href="#!">Link 1</a></li> <li><a href="#!">Link 2</a></li> <li><a href="#!">Link 3</a></li> <li><a href="#!">Link 4</a></li> </ul> </div> </body> <html>