Displaying a drop down on hover - html

Question

Below is the code I have written to display a dropdown list. The dropdown items display on click, but I want the dropdown list to be displayed on hover and I want the page to redirect to the link provided.
<select id="marketplace">
<option>Select a dropdown</option>
<option>Amazon</option>
<option>Flipkart</option>
<option>Snapdeal</option>
<option>paytm</option>
</select>

Answer 1

As W3Shcools You can use instead of select tag div like this implementation
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Select a dropdown</button>
<div class="dropdown-content">
Amazon
Flipkart
napdeal
paytm
</div>
</div>
Also I tried to define onmouseenter event for your select tag and open its options on this event in javascript. But according to this it is not possible. So you must change your tag!
Codes I try:
function f() {
console.log('here')
var select = document.getElementById('marketplace');
select.click();
}
<select id="marketplace" onmouseenter="f()">
<option>Select a dropdown</option>
<option>Amazon</option>
<option>Flipkart</option>
<option>Snapdeal</option>
<option>paytm</option>
</select>
Tip Use option tag as direct child of select tag and put a tags inside options

Answer 2

I made it using this website
http://www.devcurry.com/2009/04/using-javascript-to-dropdown-html.html
And then i add function to redirect to the link ^^
Check this :D
The code demo is over at http://www.dotnetcurry.com/Demos/javascript/HoverSelect.htm
function DropList() {
var n = document.getElementById("sel").options.length;
document.getElementById("sel").size = n;
}
function handleSelect(elm){
window.location = elm.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="sel" onmouseover="DropList()" onmouseout="this.size=1;" onchange="javascript:handleSelect(this)">
<option value="https://www.amazon.in/">Amazon</option>
<option value="https://www.flipkart.com/">Flipkart</option>
<option value="https://www.snapdeal.com/">Snapdeal</option>
<option value="https://www.paytm.com/">paytm</option>
</select>
</div>

Answer 3

You can make this by using other html elements such as ul and li like this
.menu {
}
.submenu {
position: absolute;
left: 0;
top: 100%;
display: none; // initially submenu is hidden
}
.menu li {
position: relative;
}
.menu li:hover .submenu {
display: block; // shows submenu on hover
}
<ul class="menu">
<li>Select a dropdown
<ul class="submenu">
<li>Amazon</li>
<li>Flipkart</li>
<li>Snapdeal</li>
</ul>
</li>
</ul>

Answer 4

You can achieve this using javascript
function DropList() {
var n = document.getElementById("sel").options.length;
document.getElementById("sel").size = n;
}
function handleSelect(elm){
window.location = elm.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="sel" onmouseover="DropList()" onmouseout="this.size=1;" onchange="javascript:handleSelect(this)">
<option>Select a dropdown</option>
<option>Amazon</option>
<option>Flipkart</option>
<option>Snapdeal</option>
</select>
</div>

Answer 5

For creating similar/repetitive elements in HTML, I prefer to use ul li, it makes controlling them more easier.
NO NEED OF JS OR JQUERY, TRY USING MORE CSS!
Code for dropdown
(YOU MIGHT FIND THE CSS WAY TOO LONG, ITS BECAUSE I CUSTOMISED THE ELEMENTS TO LOOK MORE NEAT)
HTML
<div class="navigationWrap">
<ul>
<li class="dropdown">Dropdown
<ul class="subNav">
<li>Dummy One</li>
<li>Dummy Two</li>
<li>Dummy Three</li>
<li>Dummy Four</li>
</ul>
</li>
</ul>
</div>
CSS
Using position absolute & relative to display element on hover, and WE ARE DONE!
ul { margin: 0px; padding: 0px; list-style: none; }
.navigationWrap ul li { width: 100%; float: left; color: #000; font-size: 30px; position: relative; }
.navigationWrap ul li a { text-decoration: none; color: #000; display: block; }
.navigationWrap ul li a:hover { color: #04A000; }
.navigationWrap ul li ul.subNav { position: absolute; width: 150px; padding:10px; background-color: #fff; border: #000 solid 1px; left: 0; top: 100%; display: none; z-index: 999; }
.navigationWrap ul li ul.subNav li { float: left; width: 100%; font-size: 20px; letter-spacing: 1px; padding: 0; }
.navigationWrap ul li ul.subNav a { float: left; width: 100%; transition: all 0.3s ease-in-out; display: block; padding: 0 0 0 15px; }
.navigationWrap ul li ul.subNav li a:hover { color: #04A000; padding-left: 20px; }
.navigationWrap ul li ul.subNav li.active a { color: #04A000; }
.navigationWrap ul li.dropdown:hover ul.subNav { display: block; }
JSFIDDLE -- https://jsfiddle.net/neel448/u0Lmb0jv/