how to make a hover dropdown menu in html

-

How to create a responsive hoverable dropdown menu in html and css.

We will create a simple dropdown menu with html and css .
When we move a mouse arrow on the button it will show 
the menu. It is very easy

Here is the Drop down menu

Here is the source code: 


<!DOCTYPE html>
<html>
<head>
<style>

.dropbtn {
    background-color: #48d1cc;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content
a:hover{background-color:#f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #7effa5;
}

</style>
</head>

<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to
   open the dropdown menu.</p>

<div class="dropdown">
<button class="dropbtn">Dropdown
</button>

  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>

</div>

</body>
</html>





Comments

Post a Comment

Popular posts from this blog

Hello World Program in C++

-
Hello World Program in C++ The "Hello, World!" program is often the first program beginners write when learning a new programming language. In C++, it's a simple yet powerful way to introduce the basic syntax and structure of the language. Let's break down the components of the C++ "Hello, World!" program: #include <iostream> int main() { std::cout << "Hello, World!" << std::endl; return 0; } Explanation: #include <iostream> : This line includes the iostream header file, which contains declarations for the standard input/output stream objects in C++, such as std::cout and std::endl . int main() : This is the main function of the program. All C++ programs must have a main() function, which serves as the entry point of the program. std::cout << "Hello, World!" << std::endl; : This line uses the std::cout object to output the message "Hello, World!" to...
Read more

How to create a list group with css

-
Image
How to create a list group with css and html We will create a responsive and very simple list group with css and html. We will design a beautiful header with  hoverable lists. Here is the list group Here is the source code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .group-list { width : 100% ; height  :auto; padding  : 0 ; margin  : 0 ; border-top : 1px  solid #ddd ; border-left : 1px  solid #ddd ; border-right  : 1px  solid #ddd; border-radius  : 2px ; box-shadow : 0   0   2px   2px  rgba( 0 , 0 , 0 , 0.1 ); } .group-list:first-child   a { border-top-left-radius : 2px ; border-top-right-radius : 2px ; } .group-list:last-child   a { border-bottom-left-radius : 2px ; border-bottom-right-radius : 2px ; } .group-list   .header { background  :#d32f2f ; color :#fff; } .group-list   .h...
Read more

How to create a responsive accordion with html and css

-
Image
 How to create a responsive accordion with html and css Accordions are useful when you want to toggle between hiding and showing large amount of content. We will create accordion with very simple and easy way. Here is the code <! DOCTYPE   html > < html > < head > < style > button.accordion  {      background-color : #cb4d4d;      color : #fff;      cursor : pointer;      padding :  18px ;      width :  100% ;      border : none;      text-align : left;      outline : none;      font-size :  15px ;      transition :  0.4s ; } button.accordion.active , button.accordion:hover  {      background-color : #7d1e1e; } button.accordion:after  { /* Unicode character...
Read more