Creating a simulated dropdown menu using only CSS

I was able to create a select menu using only CSS, following some code I found.

However, I am now facing an issue with overlaying divs. Whenever I hover or click on the "select menu", all the divs below it move down.

I've attempted to adjust the z-index and positioning but have not been successful so far. It seems like a simple problem, but I've been staring at this code for hours and it's driving me crazy.

body {
  width: 100%;
  min-height: 500px;
  margin: 3em auto;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  color: #fff;
  font-weight: 300;
  font-size: 50px;
  font-family: ProximaNovaSoftW03-Semibold;
  letter-spacing: 0px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}

h1 i {
  position: relative;
  font-size: 70px;
}
...

<div class="reserve-select">
  <input type="radio" name="option">
  <span class="placeholder">Choose...</span>

  <label class="option">
        <input type="radio" name="option">
        <span class="title">Speedometer</span>
      </label>
  ...
</div>

LINK: https://jsfiddle.net/o2gxgz9r/13580/

htmlcssdrop-down-menu

Answer №1

For an alternative approach, consider wrapping the options in a div and setting the position to absolute for that div.

body {
  width: 100%;
  min-height: 500px;
  margin: 3em auto;
  background: white;

  /* IE6-9 fallback on horizontal gradient */
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  color: #fff;
  font-weight: 300;
  font-size: 50px;
  font-family: ProximaNovaSoftW03-Semibold;
  letter-spacing: 0px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}
h1 i {
  position: relative;
  font-size: 70px;
}

p {
  text-align: center;
  color: #000;
  font-size: 14px;
  margin-bottom: 2em;
  line-height: 30px;
}
p img {
  position: relative;
  top: 8px;
  right: 10px;
}

.paragrafo {
  width:100%;
  background-color: #e1e1e1;
  z-index: 1;
}

.reserve-select {
  position: relative;
  //overflow: hidden;
  display: block;
  margin: auto;
  width: 330px;
  height: 100%;
  border-bottom: 0px;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0px 1em 1em -1.5em rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
reserve-select:not(:hover) > i.toggle.icon-arrow-down {
  display: block !important;
}
reserve-select:not(:hover) > i.toggle.icon-arrow-up {
  display: none !important;
}
// rest of the CSS code

<body>

<div class="reserve-select">
  <input type="radio" name="option">
  <span class="placeholder">Choose...</span>
<div  class="options">
 <label class="option">
    <input type="radio" name="option">
    <span class="title">Speedometer</span>
  </label>
  <label class="option">
    <input type="radio" name="option">
    <span class="title">Fire</span>
  </label>
  <label class="option">
    <input type="radio" name="option">
    <span class="title">Badge</span>
  </label>
</div>
 
</div>

<div class="paragrafo">
  <p>Teste</p>
</div>

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

Troubleshooting problems with Bootstrap datepicker in a Vue project

I am facing a problem with the b-datepicker feature while trying to select a date. The dates are not appearing correctly, as shown in the image linked below. Here is my code: <b-form-group class="my-3" > <b-input-group> ...

htmlvue.jswebbootstrap-4buefy

Using jQuery to assign the value of a hidden element to data being posted

When using jQuery's post() method to call an ajax action that returns JSON data ({"Success": "true" } or {"Success": "false"}), the value of a hidden HTML element is supposed to be set to the Success value in the returned object. However, after settin ...

javascriptjqueryhtmlajaxjson

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

Here is the structured list that I am currently working with: function convert( name_ref ) { name_ref = name_ref + " > ol > li"; var mylist = []; $(name_ref).each(function () { if ($(this).find('> ol > li').length){ myl ...

javascriptjqueryhtmljson

Relocate the HTML checkbox to the left side of its width

I need an answer that utilizes only CSS, without any JavaScript. In a form, I have a checkbox as follows: <label for="autologin">Remember Me</label> <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> <d ...

htmlcsscheckboxcss-floatforms

Customize the default classes for DataGrid in Material UI

Attempting to customize the CSS properties in the "DataGrid" Material UI, specifically adjusting font weight and overflow of the header. Below is the JSX code snippet: import React, {useState, useEffect} from 'react'; import {DataGrid, GridToolb ...

htmlcssreactjsmaterial-ui

Step-by-step guide on positioning an image to show at the bottom of a div

I am trying to create a div that covers 100% of the screen height, with a table at the top and white space below it for an image. However, when I add the image, it ends up directly under the table instead of at the bottom of the DIV. I have searched on G ...

javascriptjquerycss

What is causing jQuery toggleClass to fail in removing a class?

I have successfully implemented a Skills accordion feature, but I am now trying to add a button that toggles all the skill sections at once. However, I am facing issues with jQuery not correctly adding or removing classes on the .accordion-trigger-all elem ...

javascripthtmljquerycss

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

javascriptjqueryhtmljquery-selectorsescaping

What is the best way to include a hyperlink in the same line?

I was curious about how to insert a hyperlink following some text: If you need more information on PCSE, make sure to check out the FAQ section on the PCSE website. (INSERT LINK HERE) <div class="panel-body"> <p>If you require any further inf ...

html

Ways to eliminate line breaks and <br> tags in text using only CSS to create a button that trunc

I am currently working on incorporating a truncated text button using only CSS. The issue I'm facing is that the "show more" button doesn't ignore the line breaks or any other relevant HTML within the teaser and text body. This is causing too muc ...

htmlcsscheckboxlabeltruncate

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Although I believe my code is correct, I am not very familiar with AJAX and have been struggling for hours to get it right. I've tried various approaches, including using filters, but nothing seems to work. The issue I'm facing is that the chat m ...

javascriptjqueryhtmlcssajax

Finding and removing the last portion of the innerHTML can be achieved by employing specific techniques

Looking to manipulate a <div> element that includes both HTML elements and text? You're in luck. I need to locate and remove either the last, nth-from-last, or nth plain text section within it. For example: <div id="foo"> < ...

javascripthtmldom

Looking for assistance in designing SVG tabs?

I'm looking to create tabs that have a design similar to the one shown in this image. Initially, I attempted to achieve this using plain CSS by creating a triangle with the border trick but encountered challenges in adding the gray border. I am now co ...

htmlcsssvg

The design I created includes a horizontal scroll feature and certain elements are not properly aligned in the

Oh man, I'm really frustrated right now. I want all my elements to be centered horizontally on smaller devices, but some of them are slightly off to the side. And to top it off, there's a horizontal scroll appearing - it's like something is ...

htmlcss

Basic Tallying Code in JavaScript

Hi, I am currently working on creating a basic counter using HTML / CSS and Javascript. Unfortunately, my Javascript code is not functioning correctly, even after trying various solutions found online. I attempted to include "async" but it appears that my ...

javascripthtml

Having trouble with jQuery's scrollLeft function on elements that are not currently visible

Within a large container DIV that contains numerous other elements and has a scroll bar, an issue arises when determining the value of scrollLeft. When the DIV is visible, the scrollLeft() function returns the correct value, but when the element is hidden, ...

javascriptjqueryhtmlcss

Submenu animation that "bursts onto the scene"

I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...

javascriptjqueryhtmlcssanimation

Prevent border duplication in CSS and retain border visibility

Check out this fiddle where I have three divs with a border-width of 2px. Originally, the issue was that each div's border gets duplicated in between, resulting in a total border-width of 4px. To solve this, I applied a margin-top of -2px to each div, ...

htmlcssborder

I am having trouble getting the Audio Code (a very basic code) to function properly

<audio id="myAudio" src="Avengers.mp3" type="audio/mpeg"></audio> <script> window.onload = function(){ document.getElementById('myAudio').play() } </script> Recently experimenting with some code in NotePad, a friend had ...

javascripthtml

Creating an automated HTML tag for a form input

Is there a plugin to create form inputs like the one shown above? How can I add this feature to my own website? I would like for every user input to automatically add the < br > tag. ...

phphtmlforms