RVmis/Task7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Navbar container */
.navbar {
  overflow: hidden;
  background-color: rgb(255, 10, 255);
  font-family: Arial;
  border-radius: 10px;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: rgba(229, 255, 0, 0.932);
  color: Brown;
  border-radius: 12px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  border-radius: 15px;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
#mydropdown{
  display: none;
}
/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover:first-child .dropdown-content {
  display: block;

}
    </style>
</head>
<body>
    <div class="navbar">
      <div class="dropdown">
        <button onmouseover=myClose() class="dropbtn">Hover</button>
        <div class="dropdown-content">
          <a href="https://github.com">Profile</a>
          <a href="https://github.com/CC-BHU/">Coding Club</a>
          <a href="https://github.com/CC-BHU/web-development">Repository</a>
        </div>
      </div>
      <div class="dropdown">
        <button onclick=myFunction() class="dropbtn">Click</button>
        <div id="myDropdown" class="dropdown-content">
          <a href="https://github.com">Profile</a>
          <a href="https://github.com/CC-BHU/">Coding Club</a>
          <a href="https://github.com/CC-BHU/web-development">Repository</a>
        </div>
      </div>
      <Script>
        function myClose() {
  myDropdown.style.display = "none";
}
        function myFunction() {
          console.log("Called");
          
  var x = document.getElementById("myDropdown");
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
  event.stopPropagation();
}

// Close the dropdown if the user clicks outside of it
document.onclick = function() {

  myDropdown.style.display = "none";
}
      </Script>
</body>
</html>