//HTML <div class='dropdown'> <Link id='product' className='every' to='/products'>OUR PRODUCTS</Link> <div class='dropdown-content'> <Link to='autocadd'>AutoCadd</Link> <Link to='techset'>Techset</Link> <Link to='Endorse'>Endorse</Link> </div> </div> //CSS .dropdown{ position: relative; display: inline-block; } .dropdown-content{ display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content>*{ color: black; padding: 12px 6px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content{ display: block; } .dropdown-content>*:hover{ background-color: #ddd; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter