HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
CSSHTML

How to Create Dropdown with hover

In this article, you will learn How to Create Dropdown with hover.

dropdown.html

<html>
<head>
<title>Dropdown List using Hover</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
 </body>
</html>

style.css

.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;
}

You can also check on Facebook

bootstrap dropdown bootstrap dropdown menu css button style dropdown menu html combobox html dropdown
How to Create Image Gallery in HTMLPrevHow to Create Image Gallery in HTMLMarch 14, 2020
How to use hover in Cascading StylesheetMarch 14, 2020How to use hover in Cascading StylesheetNext

Leave a Reply

Your email address will not be published. Required fields are marked *

Search
Recent Posts
  • 10 Tools to Use for More Productive and Effective Writing
  • How Image to Text Tools Improve Student Performance
  • Top 10 Mobile App Development Companies in New York
  • Tips For College Students to Improve Efficiency
  • How To Create A Successful Digital Marketing Strategy
Categories
  • Business
  • Core PHP
  • CSS
  • Digital Marketing
  • HTML
  • JAVA
  • Jobs
  • jQuery
  • Mysql
  • News
  • Others
  • Photography
  • Projects
  • Recipes
  • WordPress

  • How to Create List in HTML
  • How to use Iframe in HTML
  • How to Create a Table in HTML and CSS
  • How to Add New HTML Content using jQuery
  • CSS Property of List tag in HTML
  • How to use CSS for Table in HTML
  • How to Make Basmati Rice Recipe
  • How to Make Indian Kheer Recipe
  • How to Make Spicy Aloo Tikki
  • How to Make Aloo Matar Samosa
  • How to Make Cheese Potato Sandwich
  • How to Make Aloo Palak Methi
  • Company Visitors Management System
  • Complaint Management System using PHP
  • Directory Management System
  • Employee Record Management System
  • Hospital Management System using PHP
  • Vehicle Parking Management System

Copyright © 2022 Hub of Tutorials. All Rights Reserved. Designed by AS Webworks