CSS Dropdowns | CSS dropdown
CreateahoverabledropdownwithCSS.Demo:DropdownExamplesMovethemouseovertheexamplesbelow:Other:BeautifulCinqueTerreBasicDropdownCreateadropdownboxthatappearswhentheusermovesthemouseoveranelement.Example.dropdown{ position:relative; display:inline-block;}.dropdown-content{ display:none; position:absolute; background-color:#f9f9f9; min-width:160px; box-shadow:0px8px16px0pxrgba(0,0,0,0.2); padding:12px16px; z-index:1;}.dropdown:hover.dropdown-content{ display:block;}
Create a hoverable dropdown with CSS.
Demo: Dropdown ExamplesMove the mouse over the examples below:
Other:Beautiful Cinque Terre
Basic DropdownCreate a dropdown box that appears when the user moves the mouse over an element.
Example .dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1;}
.dropdown:hover .dropdown-content { display: block;}</style>
<div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <p>Hello World!</p> </div></div>
Try it Yourself »[1] Example ExplainedHTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element.
Use a container element (like <...