Displaying a drop down on hover

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>
<a href="https://www.amazon.in/"><option>Amazon</option></a>
<a href="https://www.flipkart.com/"><option>Flipkart</option></a>
<a href="https://www.snapdeal.com/"><option>Snapdeal</option></a>
<a href="https://paytm.com/"><option>paytm</option></a>
</select>

try this way http://www.devcurry.com/2009/04/using-javascript-to-dropdown-html.html — chirag solanki, May 23 '18 at 05:30

Saeed · Answer 1 · 2018-05-23T05:45:11.423

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">
    <a href="https://www.amazon.in/">Amazon</a>
    <a href="https://www.flipkart.com/">Flipkart</a>
    <a href="https://www.snapdeal.com/">napdeal</a>
    <a href="https://paytm.com/">paytm</a>
  </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><a href="https://www.amazon.in/">Amazon</a></option>
<option><a href="https://www.flipkart.com/">Flipkart</a></option>
<option><a href="https://www.snapdeal.com/">Snapdeal</a></option>
<option><a href="https://paytm.com/">paytm</a></option>
</select>

Tip Use option tag as direct child of select tag and put a tags inside options

score 2 · Answer 2 · answered May 23 '18 at 05:32

2

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><a href="https://www.amazon.in/">Amazon</a></li>
      <li><a href="https://www.flipkart.com/">Flipkart</a></li>
      <li><a href="https://www.snapdeal.com/">Snapdeal</a></li>
    </ul>
  </li>
</ul>

answered May 23 '18 at 05:32

Zuber

3,393
1
19
34

Where is `select` element? – Ehsan May 23 '18 at 05:34
If we need to show `dropdown` on `hover`, than using `select` is not a good option i guess – Zuber May 23 '18 at 05:37
@Zuber, thank you for your response, i want the select element so that the style should not gets vary. – Shaik May 23 '18 at 05:37
Welcome @Saif, i will get back to you with other solution – Zuber May 23 '18 at 05:39

score 2 · Accepted Answer · edited May 23 '18 at 06:17

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>

Zuber · Answer 4 · 2018-05-23T06:08:41.720

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><a href="https://www.amazon.in/">Amazon</a></option>
            <option><a href="https://www.flipkart.com/">Flipkart</a></option> 
            <option><a href="https://www.snapdeal.com/">Snapdeal</a></option> 
        </select>
    </div>

Here is another solution which might help you @Saif – Zuber May 23 '18 at 05:53 — Zuber, May 23 '18 at 05:53

Neelansh Verma · Answer 5 · 2018-05-23T06:40:49.320

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"><a href="#">Dropdown</a> 
   <ul class="subNav"> 
      <li><a href="#">Dummy One</a></li> 
      <li><a href="#">Dummy Two</a></li> 
      <li><a href="#">Dummy Three</a></li> 
      <li><a href="#">Dummy Four</a></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/

Displaying a drop down on hover

5 Answers5