Dropdown menus are great for forms and navigation list when you have to pick from a list. The traditional dropdowns included a special button, on clicking which you get a list of options to select from. CSS has although made things easy for us. With the help of CSS properties, we can create hoverable dropdowns.
CSS allows us to get the dropdown list without clicking any buttons. All you have to do is hover over the ‘dropdown menu’ and the list will appear on its own. This is called a hoverable drop down. To create one, here are three things that we’ll surely need:
- Opening Element: This will serve as the drop-down button. You can use any HTML element like a <span> or a <button> etc. for this purpose. A small text like “Select Any One” or “Move the mouse here” etc. will help to highlight this button. You an wrap a <div> around it for better positioning
- List: The dropdown list will appear with the help of two user defined classes:
- .dropdown: This will help keeping the position: relative to ensure that the list is right below the dropdown button. The display property can also be set to inline-block for the same purpose
- .dropdown-content: This will be the child element for the .dropdown class and will appear only on hovering the mouse over a dropdown class element. The dropdown-content class will define the space for the dropdown list with the position: absolute.
Dropdown Menu
We can use the dropdown in the menu/navigation bar. User will just have to hover over the menu title and the related page-link will appear on their own.
Right-aligned Dropdown Content
If you add right: 0, you can get the dropdown menu content going from right to left (right aligned)
Apart from this, dropdown feature can also be used with images to show different version of a thumbnail or for a zoomed in image.