CSS dropdown tutorial, we explain how to design drop-down menus with the help of CSS. Dropdowns are the most important parts of an interactive website.
A CSS dropdown is a collection of the list under an unordered list i.e. <ul>. The <li> tags under the <ul> tag used to create drop-down structure.
The CSS is a very straightforward property used to create the drop-down menu.
Explanation of above code:
Use any element to open the dropdown content, for example: a <span>, or a <button> element. Using any container element like <div> to create the dropdown content and add whatever you want inside of it.
The .dropdown class uses position:relative, which is needed when we want the dropdown contents to be placed right below the dropdown button (using position:absolute).
The .dropdown-links class holds the actual dropdown content. We use display: none, so It is hidden, and will be displayed on hover. Here we take min-width is 110px, you can change this if you want. If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).
When the user moves the mouse over the dropdown button the dropdown menu will be displayed using :hover selector.
Right-aligned Dropdown
To display dropdown content on right side set float: right; property to the <div> which holds the content.
Image Dropdown
This is not a dropdown but when you hover enlarges the image. Needs basic CSS and an image to make it work.