Issues with sublevels not appearing when clicking on a DropDown Button in Html and CSS

I recently encountered an issue while using CSS and HTML in my email to create a Drop Down List. After clicking on the Drop Down Button, the sublevels were not visible. Can someone please assist me in resolving this problem? Any help would be greatly appreciated. Thanks and Regards, Ramyashree

Check out the CSS-Inline code here

View the output of the code here

    <div class="dropdown" style="position: relative;display: inline-block;">
     <button class="dropbtn" style="padding: 16px;font-size: 16px;border: none;cursor: pointer;">Dropdown</button>
     <div class="dropdown-content" style="display: none;position: absolute;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;">
      <a href="#" style="color: black;padding: 12px 16px;text-decoration: none;display: block;">Yes</a>
      <a href="#" style="color: black;padding: 12px 16px;text-decoration: none;display: block;">No</a>
      </div>
   </div>
htmlcsshtml-email

Answer №1

It is recommended to set up an onclick event for the button:

.block {
  display: block !important;
}
<div class="dropdown" style="position: relative;display: inline-block;">
  <button class="dropbtn" onclick="dropdown()" style="padding: 16px;font-size: 16px;border: none;cursor: pointer;">Dropdown</button>
  <div class="dropdown-content" id="dropdown" style="display: none;position: absolute;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;">
    <a href="#" style="color: black;padding: 12px 16px;text-decoration: none;display: block;">Yes</a>
    <a href="#" style="color: black;padding: 12px 16px;text-decoration: none;display: block;">No</a>
  </div>
</div>
<script type="text/javascript">
  function dropdown() {
    document.getElementById("dropdown").classList.add("block");
  }
</script>

Alternatively, you can utilize the focus pseudo class:

.dropbtn:focus + .dropdown-content {
  display: block !important;
}
<div class="dropdown" style="position: relative;display: inline-block;">
  <button class="dropbtn" style="padding: 16px;font-size: 16px;border: none;cursor: pointer;">Dropdown</button>
  <div class="dropdown-content" style="display: none;position: absolute;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;">
    <a href="#" style="color: black;padding: 12px 16px;text-decoration: none;display: block;">Yes</a>
    <a href="#" style="color: black;padding: 12px 16px;text-decoration: none;display: block;">No</a>
  </div>
</div>

Answer №2

I'm skeptical that you can achieve any meaningful results with this. Implementing any functionality would rely on JavaScript, which is typically disabled in HTML Email.

If you want to create interactive elements in email, consider using form components like select and option. Take a look at for more information.

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

Use Reporter.log() function in order to display an HTML hyperlink

I have a task in selenium where I need to display an HTML link as a hyperlink. For instance: System.out.println("https://www.google.co.in"); Reporter.log("https://www.google.co.in"); The code above prints the Google link as plain text, but I am looking f ...

javahtmlselenium

Guide to creating a vertical handler that can be resized

Did you know that you can resize tables in http://www.jsfiddle.net? I'm curious about how to resize just the "Vertical Handler". Could someone share the source code with me? If possible, please provide an example on http://www.jsfiddle.net. ...

javascripthtmlcss

What is the best way to position these two images side by side in a row?

Is there a way to place both images in the same row while also adding subtitles to each? I've tried different approaches, but I can't seem to align them properly with the subtitles included. <div class="container row-info"> <div cla ...

htmlbootstrap-4

Prevent the SVG mouseclick event with CSS styling

Is it possible to prevent clicking on an SVG element using CSS? .disabled{ pointer-events: none; } After selecting the SVG element with $(".dasvg"), the console confirms the selection: [ <svg width=​"500" height=​"500" class=​"dasvg">​ ...

jquerycsssvg

The menu-item is unable to be centered in its location

I've exhausted all my efforts, but still can't seem to center this menu-item. Here is the code I've been working with: <div class="nav nav-tabs mb-2" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="na ...

htmltwitter-bootstrapbootstrap-4

Incorporating User Input: Adding Paragraph Elements with HTML and Javascript to a Div Container

I am attempting to test my ability by creating a basic webpage. My goal is to take the text entered by the user in a textarea and add it to the page using a button. This button should generate a new paragraph element, place the user input inside of it, and ...

javascripthtml

Customizing tab menu functionality for specific click actions

I have created a simple HTML tab menu with JavaScript that allows for changing content when tabs are clicked. test.html <!DOCTYPE html> <html> <head> <title>My Menu Test</title> <style type="text/css" media="all"& ...

javascriptjqueryhtmlcss

The appearance of the website varies on the localhost compared to what is depicted

My website appears differently on the web URL than it does on localhost. It displays perfectly on localhost, but when I run it on the actual URL, it is shifted upwards and the carousel overlaps the navigation panel. I have tried numerous solutions but noth ...

htmlcss

How can the AJAX request be adjusted to ensure that the dependent drop-down is hidden when the page initially loads?

My current form includes a dependent drop-down feature. Right now, both the main drop-down and the dependent one are displayed when the page loads. If a "Work Area" without a "Station" is selected, then the station drop-down disappears. What I want to acc ...

htmldjangoajax

Send a data entry to a website by using an HTML form with C#

I'm currently working on a school project where I am looking to access our timetable from our Windows 8.1 devices using a universal app. It would be convenient if I could bypass the login process every time and view the schedule directly. I am seeking ...

c#htmlwindowsformssubmit

PHP - What is the reason for the output being a multi-dimensional array?

Hey there, I'm currently working with this code and for some reason, the variable records2 is returning a multi-dimensional array. Can anyone help me figure out why this is happening? I actually need it to be a simple, single dimension array. functi ...

phphtmlmultidimensional-array

Having trouble retrieving data from a remote URL with angucomplete-alt

Utilizing the angucomplete-alt directive for creating an autocomplete list through a get request. Successfully fetching results from the Github API: <div angucomplete-alt id="ex5" placeholder="Search projects" pause="500" selected-object="selectedProj ...

javascripthtmlangularjsautocompleteangularjs-directive

Struggling to get the class to be implemented

One dilemma I encountered involved an H3 header labeled with the class "calbri", as depicted in the subsequent HTML code: <footer> <div class='wrapper'> <div class='col'> <h3 class="calibri">Column Header</h ...

htmlcssclass

Is there any code for displaying the action form?

I'm brand new to PHP and just tried a simple form processing program I found in a book: <!doctype html> <head> <meta charset="utf-8"> <title>Bob's Parts Store</title> </head> <body> <form action = ...

phphtml

Implement a customized range slider for precise numeric input

A slider within me makes use of an input range with the following current numbers: 12, 24, 36, 48, 60 I now require the ability to accommodate: 24, 36, 48, 60, 120 <input type="range" data-id='slider1RangePicker' name="ran ...

javascripthtmlinputrange

Steps to Change the Background Color to White in a Dropdown menu

Hello everyone! I'm currently using this codepen example on my website. My query is regarding the fifth panel - is it possible to change the color of the drop-down box when clicking on it? Here's a snippet of the HTML: <link href='https: ...

javascripthtmlcss

jquery hovering illustration extension

I recently came across a website called Consumer Barometer (http://www.consumerbarometer.com) and was impressed by its design. I tried to find a similar jQuery plugin, but had no luck. Eventually, I stumbled upon this website (http://blog.hostgrenade.com/2 ...

jqueryhtmlcanvas

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Is it feasible to hover over a nested child element without activating a hover effect on the parent element? In the demonstration below, you'll notice that even when hovering over the child, the hover effect on the parent is still in place. I am int ...

htmlcsscss-selectorshover

Altering the Color of Items in an ASP.NET ListBox

I have a listbox on a webform that is being populated by a datasource from a SQL Server 2008. Based on the text in the list box, I want the background color of each specific item to be different. For example, if these are the items in the list: AA item ...

c#javascriptasp.nethtmlsql

The inclusion of individual CSS files in a TypeScript React project does not have any effect

My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: https://i.sstatic.net/UNtEP.png In the Header.css file, I have defined a class: .mainHe ...

cssreactjstypescript