I have code below for 2 ddls containing 3 items. Is it possible to have the title shown on each drop down list change to whatever item the user selects, but only using vanilla JavaScript or CSS? Anything would help, cheers.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
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);
z-index: 1;
}
.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: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
var div = document.getElementsByClassName('dropdown-content');
for(var i =0;i<div.length;i++){
for(var j =0;j<div[i].children.length;j++){
div[i].children[j].addEventListener('click',function(){
this.parentNode.previousElementSibling.innerHTML = this.innerHTML;
})
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
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);
z-index: 1;
}
.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: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can do this with Vanilla JS.
You'll simply attach click listeners to each anchor, then traverse up the parent nodes to find the button and replace the innerHTML.
Please note that anchors is all the links in you page, so if there are other anchors on your page beside what you've provided, you'll need to be a little more specific when defining the anchors array.
var anchors = document.getElementsByTagName('a');
for(var i = 0, len = anchors.length; i < len; i++) {
var thisAnchor = anchors[i];
thisAnchor.onclick = function () {
var btn = this.parentNode.parentNode.getElementsByTagName('button')[0];
btn.innerHTML = this.innerHTML;
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
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);
z-index: 1;
}
.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: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Here is a jsfiddle for you.
JSFIDDLE
<div class="dropdown">
<button id="btn1" class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button id="btn2" class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<script>
function doSelect(text,btn){
var myElement = document.getElementById(btn);
myElement.innerText = text;
}
</script>
Related
Lets say I have a sorting list like this
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
<div class="dropdown">
<button class="dropSortbtn2"> Food <i class="bi bi-caret-down"></i></button>
<div class="dropdown-content">
Tomato
APPle
Carrot
Broccoli
</div>
</div>
I want that drop down list to sort list of items and hide others,
so for example if I have this list
<ul>
<li>Tomato</li>
<li>APPle</li>
<li>Broccoli</li>
<li>Carrot</li>
<li>Tomato</li>
<li>Broccoli</li>
</ul>
And the user click tomato in the drop down list, all items should be hidden and only tomato elements will be shown. What is the correct way to do this ? knowing that the sorting drop down list will be really long.
You can add a click event listener to all select options that loops through each li in the ul and hides those whose textContent is not equal to the textContent of the select option clicked.
const options = document.querySelectorAll('.dropdown .dropdown-content a')
const listItems = document.querySelectorAll('#list li');
options.forEach(f => f.addEventListener('click', function(e){
let text = this.textContent;
listItems.forEach(e => e.style.display = e.textContent == text ? "block" : "none")
}))
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
<div class="dropdown">
<button class="dropSortbtn2"> Food <i class="bi bi-caret-down"></i></button>
<div class="dropdown-content">
Tomato
APPle
Carrot
Broccoli
</div>
</div>
<ul id="list">
<li>Tomato</li>
<li>APPle</li>
<li>Broccoli</li>
<li>Carrot</li>
<li>Tomato</li>
<li>Broccoli</li>
</ul>
I made "hamburger" icon on my website navigation bar.
I added simple animation JavaScript, it works great.
Now I want the icon to open Clickable Dropdown, I am kinda confused since I am already using script file, and class.
I am not sure how can i combine two JS code to the same Class, and how to edit the dropdown links with the original icon bars..
this is my Icon :
HTML:
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
CSS:
.hamburger {
cursor: pointer;
color:#333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
}
Javascript:
function myFunction(x) {
x.classList.toggle("change");
}
Finally this is the dropdown I am trying to add:
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
CSS:
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
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 a:hover {background-color: #ddd;}
.show {display: block;}
Javascript:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
You can use the same function for both elements. I think the main issues is that you make the drop down disappear when clicked outside it. This "outside" includes the hamburger menu icon.
Here is a working example:
// Keep a refernce for dropdown to access it from any function
const dropdown = document.getElementById("myDropdown");
function myFunction() {
dropdown.classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
// Make sure ".hamburger" or any other class is included so when it is clicked it won't hide the dropdown
if (!event.target.matches('.dropbtn, .hamburger')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.hamburger {
cursor: pointer;
color: #333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
width: 20px;
}
.hamburger>div {
height: 2px;
background-color: black;
width: 100%;
margin-bottom: 5px;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
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 a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="dropdown">
<div class="hamburger" onclick="myFunction()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
I tried this solution, hope it works for you:
<style>
.hamburger {
cursor: pointer;
color: #333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
}
.bar1, .bar2,.bar3 {
width: 40px;
height: 2px;
background-color: black;
margin-bottom: 5px;
}
.dropbtn {
background-color: #3498db;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980b9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 50px;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
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 a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
<div class="dropdown">
<div class="hamburger" onclick="myFunction()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- <button onclick="myFunction()" class="dropbtn">Dropdown</button> -->
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
function myFunction() {
const dropdown = document.getElementById('myDropdown')
dropdown.classList.toggle('show')
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.hamburger')) {
var dropdowns = document.getElementsByClassName('dropdown-content')
var i
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i]
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show')
}
}
}
}
</script>
As you can see I commented out the button, I'm not sure why you would use both, the button and the hamburguer button. Also added some styles to the 'bar; divs, otherwise you didn't see any 'hamburguer'.
Lastly change the thing you are matching on the window event listener to see if it contains the 'hamburger' class.
I have added a basic clickable dropdown button to my menu, but it can't be customize or even show the changes on the live website. And the dropdown content will not appear on separate line:
Here is a screenshot of what i am referring too:
https://imgur.com/hzKm7WI
I have searched google related to my problem, but everything I've searched is not working. Am I doing something wrong
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.button')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
margin: 0;
padding: 0;
margin-top: 130px;
overflow-x: hidden;
}
.nav-menu a img {
float: left;
margin-left: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
margin-top: -130px;
}
.nav-menu li {
float: left;
}
.nav-menu li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-menu li a:hover,
.dropdown:hover .dropbtn {
border-top: 2px solid #ff0000;
}
.nav-menu li.dropdown {
display: inline-block;
}
.nav-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nav-menu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.nav-menu .dropdown-content a:hover {
background-color: #ff0000;
color: #fff;
}
.nav-menu .dropdown:hover .dropdown-content {
display: block;
}
.nav-menu li.social {
float: right;
}
li.navbar {
overflow: hidden;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
float: right;
padding-right: 100px;
}
li.navbar a {
float: left;
font-size: 16px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-menu {
float: left;
overflow: hidden;
}
.dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
li.navbar a:hover,
.dropdown-menu:hover .button,
.button:focus {
background-color: red;
}
.dropdown-menu-content {
color: #fff;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-menu-content a {
float: left;
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Title Here</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="CSS/style.css?v=12345">
</head>
<body>
<div class="nav-menu">
<ul>
<img src="img/logo.jpg" style="width:50px">
<li class="dropdown">
Games
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Crews
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Jobs</li>
<li>Photos</li>
<li>Videos</li>
<li>Events</li>
<li>News</li>
<li class="navbar">
<div class="dropdown-menu">
<button class="button" onclick="myFunction()">
<i class="fas fa-user"></i>
</button>
<div class="dropdown-menu-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
<li class="social">
Sign In
Sign Up
<i class="fas fa-search"></i>
</li>
</div>
</li>
</ul>
Have you tried writing css with more specificity like
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
However if what you meant was it gets applied locally and not when deployed on to live site it could be due to css caching by browser in which case you can use a cache busting strategy like appending a query string(unique) at the end of url when linking the css eg
<link rel="stylesheet" type="text/css" href="./path/to/cssfile.css?v=12345">.
i've tried your code & there should be no problem.
I think its because your style was overridden by another class. You can check it with browser inspector.
In that case you should prioritize yous css by using !important like this
.dropdown-menu-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
text-align: left;
}
you can find more info about css specificity here
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have just a small dropdown menu and I would like to be able to make it so the drop down menu disappears when I click on one of the options (not the button, but just the menu you get when you hover over the button). I've been looking around for solutions to this, but I can't seem to find any answers.
function changeType(str) {
document.getElementById("selectType").innerHTML = str;
document.getElementById("selectType").value = str;
}
.dropbtn {
background-color: #360363;
margin-bottom: 0px;
min-width: 120px;
color: white;
padding: 0px;
font-size: 0.7em;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
margin-top: 0px;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 6px 16px;
text-decoration: none;
display: block;
margin-top: 0px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #4B0082;
transition: 0.5s;
}
<div class="dropdown">
<button id="selectType" class="dropbtn" value="Choose Color">Choose Color</button>
<div class="dropdown-content">
<a onclick="changeType('Red')" href="#">Red</a>
<a onclick="changeType('Green')" href="#">Green</a>
</div>
</div>
You can achieve this via CSS:
.dropdown:active .dropdown-content,
.dropdown:focus .dropdown-content {
display: none;
}
Snippet:
function changeType(str) {
document.getElementById("selectType").innerHTML = str;
document.getElementById("selectType").value = str;
}
.dropbtn {
background-color: #360363;
margin-bottom: 0px;
min-width: 120px;
color: white;
padding: 0px;
font-size: 0.7em;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
margin-top: 0px;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 6px 16px;
text-decoration: none;
display: block;
margin-top: 0px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #4B0082;
transition: 0.5s;
}
.dropdown:active .dropdown-content,
.dropdown:focus .dropdown-content {
display: none;
}
<div class="dropdown">
<button id="selectType" class="dropbtn" value="Choose Color">Choose Color</button>
<div class="dropdown-content">
<a onclick="changeType('Red')" href="#">Red</a>
<a onclick="changeType('Green')" href="#">Green</a>
</div>
I want to use the link dropdown to refer on another page how can i do that.
Found nothing on the internet.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
is it possible this way or should i use another method to create that type of dropdownmenu? I hope you guys can help me.
If I'm understanding your question correctly, just put the URL you want to go to inside the href attribute. Then use the target="_blank" attribute setting to tell the browser you want the link to open in a new blank tab.
Update
Based on comments, if you want the top level menu item "Dropdown" also linked, then simply replace the "javascript:void(0)" with the link you want. The reason for that javascript is to prevent the browser from taking action and trying to open a link when there is none. So just replace it with an actual link and you are good.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Google
Yahoo
Amazon
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
"Found nothing on the internet" is a pretty surprising claim to make.
Nevertheless, you can simply change the href value to point to the website you would like, for example ... will take you to the home page of this site.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Google
Example
Stack Overflow
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>