Using an image as a dropdown menu in HTML: A step-by-step guide

I am facing a challenge in creating an HTML/CSS button that should display a dropdown when hovered over, but unfortunately, it's not working as expected.

Here is the link to the code.

.Panel {
  overflow: hidden;
  width: 25%;
  height: 100%;
  color: blue;
  scrollbar-color: black lightgrey;
  scrollbar-width: thin;
  float: left;
}

.Panel a {
  color: black;
  white-space: pre;
  text-decoration: none;
}

body {
  overflow: hidden;
  background: url(../Images/Texture.png) repeat 0 0;
}

.Document {
  pointer-events: auto;
  position: static;
  padding-left: 26%;
  width: 49%;
  height: 100%;
}

.dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
  background-image: url("../Images/dropdown.png");
  background-size: 50px 28px;
  background-repeat: no-repeat;
  height: 28px;
  width: 50px;
}

.Panel {
  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-content a:hover {
  background-color: #ddd;
}

.dropbtn:hover {
  background-image: url("../Images/dropdown2.png");
  background-size: 28px 50px;
  background-repeat: no-repeat;
  height: 50px;
  width: 28px;
  margin-left: 30px;
  .dropdown-content {
    display: block;
  }
}
<div class="Panel">
  <button class="dropbtn"></button>
  <div id="myDropdown" class="dropdown-content">
    <br> <br>
    <a href="../" target="_self">   Home</a> <br>
    <a href="" target="_self"> </a> <br>
    <a href=”” target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a><br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a> <br>
    <a href="" target="_self"> </a><br>

  </div>
</div>

Answer №1

My suggestion is that the issue lies with the improper nesting of classes in the CSS file. Please consider the following revised code:

.hoverbtn:hover {
background-image: url("../Images/dropdown2.png");
background-size: 28px 50px;
background-repeat: no-repeat;
height: 50px;
width: 28px;
margin-left: 30px;
}
.hoverbtn:hover + .dropdown-menu {
display: block;
}

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

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

Managing the attention on a switch button

I'm struggling to maintain focus on the toggle button after it's been clicked. Currently, when I press the button, the focus jumps to the top of the page. I can't figure out what I'm doing wrong. Below is the code snippet: HTML <b ...

How can I organize data from A to Z in alphabetical order in React Native when the user chooses the A to Z option from the dropdown menu?

I am working on a screen that can display up to 1000 data retrieved from the API. Here is the image: https://i.sstatic.net/ErbDD.png Now, I have implemented a drop-down box where users can select alphabetically from A to Z. After selecting an alphabetic ...

"Header becomes frozen in place while scrolling, never budging from

I am looking to implement a sticky header effect on scroll, similar to the example shown here: () Check out the source site for more details: (https://github.com/davist11/jQuery-Stickem) Currently, I have a full-screen video playing at the top of the page ...

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

Utilize the CSS property font-family to inherit styles for headings

Is it possible to use a different font family for headings than the one used in the body text while still maintaining a consistent look across all heading levels? One way to achieve this is by specifying the font family for each heading level individually ...

The font remains the same despite the <Div style=> tag

I have a script that loads external HTML files, but I am facing an issue with changing the font to Arial. The script is as follows: <script type="text/javascript"> $(document).ready(function(){ $("#page1").click(function(){ ...

Improperly positioned Divs overlapping

Help needed: I am attempting to add a menu to a specific section. The menu div is extending off the page to the right, but it should be contained within the HOMEMENU section (the long black bar with no content). Despite using a clear:both div, the menu s ...

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

Is there a way to soften the repetitive elements in the background image?

Is there a method to blur the part of a background image that is repeated, such that if it is positioned in the center, the sides of the image appear blurry as well? ...

Modify the CSS class dynamically by clicking a button (using class names stored in an array)

How can I dynamically change a CSS class on button press while using an array of class names? When I hard code the classes in a switch statement, everything works fine. However, when trying to pull class names from an array, it jumps to the end of the swit ...

When I try to upload an image onto my website, the layout of my text gets disrupted

There seems to be quite a gap between the welcoming message and the main body text. Significant spacing noticed between Title and body ...

Setting the font size for the entire body of a webpage globally is ineffective

Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...

Using j Query to create custom masks for various formats with the option to include optional digits

Looking for a way to mask the CVV card number..! The masking should allow for either 3 numbers like xxx 123 or 4 numbers like xxxx 4567 I have attempted to implement this with jQuery mask plugin, but it only allows for 4 characters. How can I enable both ...

Discover the steps for integrating an object into a Ext.grid.Panel using Sencha Ext Js

Currently, I am utilizing Sencha Ext Js 4 and have integrated an Ext.grid.Panel into my project. I am interested in adding another element inside the header, such as a textbox. Is this achievable? {filterable: true, header: 'Unique' /*Here i w ...

I cannot seem to get the image to display properly, it keeps getting cut off and

I am trying to add an image to my website: https://i.sstatic.net/giAdT.jpg However, when I try to do this, the full image is not showing: https://i.sstatic.net/VRBlB.png This is the code I am using: <!DOCTYPE html> <html lang="en"> ...

Insert placeholder text without access to the input field

Is it possible to activate a placeholder in a component that is outside of the current context? For example: <foreign-component [config]="someConfig" placeholder="somePlaceholder"></foreign-component> The <foreign-compo ...

How to optimize the loading speed of background images in an Angular application

Utilizing Angular v6, typescript, and SASS for my project. A CSS background image is set for the homepage, however, it's a large photo that always takes too long to load. Custom CSS: @import '../../../scss/variables'; :host { .wrapper { ...

An alternative to CSS clearfix for children with fixed positioning

I understand that using clearfix can help with the zero-height container issue for floated elements. However, I am curious if there is a similar technique to clearfix for fixed elements? I am currently stuck trying to implement the clearfix method. .n ...

Inquiring about the rationale behind using `jquery.ui.all.css` specifically

I'm curious about the impact of jquery.ui.all.css on Tabs As soon as I remove it, <link rel="stylesheet" href="jquery/dev/themes/base/jquery.ui.all.css"> My tabs stop functioning. Here's my query: What exactly does the jquery.ui.all.cs ...