I am facing difficulty creating a dropdown menu with nested options that only appear when the user hovers over the main selection

Here are the parent options I have and the code I have attempted to build. I would like to include sub-options such as phones, radios, speakers under the electronics parent option and many more.

<select id="category" name="category" class="dropDown">
<option>Categories</option>
<option>All categories</option>
<option>Automotive vehicles</option>
<option>Property</option>
<option>Jobs</option>
<option>Job Seekers</option>
<option>Services</option>
<option>Home&Garden</option>
<option>Electronics</option> 
<option>Baby&Kids</option>
<option>Boats&Watercraft</option>
<option>Business</option>
<option>Fashion</option>
<option>Farming</option>
<option>Pets</option>
<option>Sports&Leisure</option>
<option>Charity Donations</option>
<option>Community</option>
<option>Events</option>
<option>Software</option>
<option>Food</option>
</select>
javascripthtmlcss

Answer №1

According to dman2306, the structure using <optgroup> should be as follows:

<select>
    <option></option>
    <optgroup label="groupA">
        <option>Option 1</option>
        <option>Option 2</option>
    <optgroup>
    <optgroup label="groupB">
        <option>Option 3</option>
        <option>Option 4</option>
    <optgroup>
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Does the color of the item change as it gets older?

How can I smoothly transition a color as it ages using a dynamic time scale? I want to calculate the age based on the difference in time rather than triggering an animation after an event. I aim for a seamless gradient transition between two colors over a ...

javascriptjqueryhtmlcss

Updating values in an Object by assigning them with results from an array

I've been grappling with a data structure issue in nodejs and I could really use some assistance. Here's the scenario: I have an object: let obj = { commenter: '', comment: '', numberOflikes: 0, } Along with a containe ...

javascriptnode.js

iisnode ran into a problem while handling the request. Error code: 0x6d HTTP status code: 500 HTTP subStatus code: 1013

Currently, I am working on a web application using ReactJS for the frontend and Express for the backend. My deployment platform is Azure. In order to verify that my requests are being processed correctly, I decided to conduct two API tests. The first tes ...

javascriptnode.jsreactjsazureexpress

What is the best way to control the number of fetch calls sent to an endpoint service ensuring that only a maximum of 10 calls are made every second?

Is there a way to prevent the browser from encountering the "Error 429 Too Many Requests" by adjusting the code below to ensure that no more than 10 calls per second are made? Please note that the rate limit of 10 calls per second is set by a 3rd-party AP ...

javascriptreactjsnext.js

Finding and choosing a date from an ng-model datepicker using Selenium Webdriver - a guide

I am encountering an issue where I can open the date picker pop-up calendar with a click, but I cannot select a specific date from it. This is due to the input field being read-only, which means that any input provided through sendkeys or JavascriptExecuto ...

jqueryhtmlangularjsseleniumselenium-webdriver

What is the best way to create a button that can show or hide an unordered list with a click?

This is where you can find my special button: <body> <h3 class="paragraph">To remove duplicates in 2 Javascript arrays (refer to the readme), combine the results into a new array and display the unique names in an unordered list below ...

html

Ways to access the entire parent element, rather than just the individual child element, following the use of e.target

Looking to target the li element itself when clicked, rather than its child elements. The goal is to determine which specific option the user selects from a dropdown menu using event.target in jQuery. If the user chooses an li with a class of 1, set one gl ...

javascriptjqueryhtmlevents

An error occurred while using Phonegap's FileTransfer() method - it seems that the File

After exploring various resources and finding no solutions, I have turned to this platform for help. I am attempting to initiate a .pdf download upon clicking on the following link: <a onclick="BeginDownload()" class="link" href="#">My guides</a ...

htmlcordovaphonegap-pluginsphonegap-build

php - assign image to picture through file location

My webpage features an img element with the following code: <img id=".."class=".." src="setPhoto/second_photo.php"> In the source attribute, I have linked to a .php file: <?php $id = $_SESSION['u_id']; $sql = "SELECT * FROM users WHER ...

phphtml

Doesn't IE support the use of jQuery.last()?

Here is the code snippet I am currently using: $('script').last().parent().html('kkkk') Unfortunately, I am encountering an error in Internet Explorer when running this code. Any suggestions on how to address this issue would be great ...

jqueryhtmlinternet-explorer

Navigating Error: net::ERR_CONNECTION while utilizing Puppeteer

I attempted to utilize a proxy from the following site: Below is my Puppeteer scraping code (deployed on Heroku), encountering an error at the .goto() method, as mentioned in the title: const preparePageForTests = async (page) => { const userAgent = & ...

javascriptnode.jsherokuweb-scrapingpuppeteer

The Gulp task abruptly terminates before the Stream has a chance to trigger the "end" event

const gulpJasmine = require('gulp-jasmine'); const gulpDebug = require('gulp-debug'); function runTest(platform, testType) { const timer = startTimer(); console.log('started!'); return gulp.src('./src/**/_test/**/ ...

javascriptnode.jsgulpstreaming

`Next.js project experiencing issues with scroll trigger functionality`

I've been working on a gsap animation with a scroll trigger, and while the animation itself functions fine, it's not triggering as expected. The AnimationEffect code involves using gsap and scrolltrigger to create the animation. The Hero section ...

javascriptreactjsnext.js

Merge requirejs modules using build script

I am attempting to merge and compress require modules into a single file. For instance, if I have a file named article.js with the following content: define(["jquery","flexslider","share_div"],function(){}); I wish for all these dependencies to be merge ...

javascriptrequirejsr.js

Determine the estimated download duration using the $http protocol

I am experiencing an issue with a function that calculates the time it takes to download a text file (3MB in size) from my server. While it works well for single requests, when I attempt to run multiple requests simultaneously, the time spent waiting for a ...

javascriptjqueryangularjs

Transition the object in smoothly after the slide has changed

How can I make the h4 tags fade in after the divs slide into view, while also adding the class "current" to each visible slide? Check out the example on JSFiddle here. <div class="slider"> <div class="slides"> <div class="slide ...

javascriptjquerycss

retrieving XML information into a div using Ajax and JavaScript

I am currently working on developing a chat application and facing an issue with fetching all logged in users into a div with the ID "chat_members". Despite confirming that the XML file structure is correct, the JavaScript code alongside AJAX does not seem ...

javascriptxmlajax

I noticed that when I include the www in the URL, I am unable to retrieve the API results. However, when I exclude the

Whenever I try to access my website through www.mywebsite.in, it fails to display my data. However, if I visit the site without the www prefix, everything works fine and I can retrieve data from the database. I'm currently utilizing APIs for both get ...

javascriptasp.netapi

The error message states: "An error occurred: Unable to find the 'HttpProvider' property within an undefined

import * as Web3 from 'web3' import { OpenSeaPort, Network } from 'opensea-js' const provider = new Web3.providers.HttpProvider('https://mainnet.infura.io') Hello everyone, I'm currently learning Node.js and encountered ...

javascriptnode.js

How to automatically insert a page break after a certain string in an array using JavaScript

I've created a code that is intended to implement page breaks after a specific number of new lines or words. I have defined an array that indicates where these breaks should occur within my element. In the example provided in my jsFiddle, you can see ...

javascriptjquerysplit