Hover dropdown menu

 Create Hover Dropdown Menu

Dropdown down menu type one is hover dropdown menu when the mouse is over the button the menu will be open it mean hover the mouse. a list under dropdown menu will be open whenever the mouse is over the dropdown menu. following are the main step of creating this tutorial 00 open VS code editor 01 create file index.html and style.css file 02 code in html document to create the structure of dropdown menu 03 code in CSS to styling the dropdown menu 04 take demo finally we create a dropdown menu



Hover Dropdown menu source code

index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hoverable dropdown</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h2>Mouseover / Hoverable Dropdown</h2>
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">blog</a>
        <a href="#">hire</a>
        <a href="#">portfolio</a>
      </div>
    </div>
  </div>
</body>
</html>


style.css 
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    margin: 10px;
    box-shadow: 0 0 30px 0;
    border: 2px solid rgb(7, 138, 88);
    width: 50%;
}

.dropbtn {
    background-color: #275ae6;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
  }
 
  .dropdown {
    position: relative;
    display: inline-block;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #bbb2b2;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
 
  .dropdown-content a:hover {background-color: #ddd;}
 
  .dropdown:hover .dropdown-content {display: block;}
 
  .dropdown:hover .dropbtn {background-color: #3e8e41;}


Watch Tutorial for more details




Comments

Post a Comment

Master Template

Login and Signup form/page

Image
Create an amazing over sliding login and signup page in html CSS for beginner and advance HTML CSS Login and Signup page / HTML CSS tutorial for beginner After completing watching this video you will be able to make a login and signup page in HTML CSS. To create Login and Signup page / form in HTML CSS just follow the following steps in this video I Demo to Login and sign up page II check the over sliding of login and sign up page III open VS code to build login and sign up page in HTML CSS IV Create index.html and style.css file in VS code V open index.html file to create login and signup page VI Open style.css file to design and style the Login and signup page VII check the output at the end of this video VIII So we have create our Login and Signup page in HTML CSS only Source code link download source code Previous video links 1 Responsive web design template / html responsive web design https://youtube.com/shorts/rvq2lCy8Hrk 2 How to create responsive Registration
Read more

Make Login and Signup form in bootstrap

Image
Create and make login and signup redirecting form in bootstrap. two button were place in the front of of form one button is login and one button is signup form with user profile. login and signup form were redirectable to each other by creating new account and login here when the user click on login here the form will call login form when the user click on create account the form will be signup form. Tutorials Of Login and signup form Download Source code
Read more