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

Is there a reason the hr tag elements aren't extending to the full width within the list?

I am having trouble with my hr tag elements in the table I created - they are not spanning the full width like the line above them. I have tried adjusting the width property but it doesn't seem to be working. Can anyone offer advice or guidance on how ...

htmlcssbootstrap-5

The element in the data cell is a form input field

This is the content of my webpage: <input type="text" class="form-control" >id="ButonSociete"name="ButonSociete"placeholder="Societe"> <table cellpadding="0" cellspacing="0" border="0" class="display" >id="demande" width="100%"> ...

jqueryajaxhtmldatatables

Developing an HTML table for room reservations using PHP - a comprehensive booking system

I'm currently working on creating an HTML table for a room booking system, but I've run into a problem trying to figure out how to insert data into cells. Right now, I'm retrieving data from a database (start time and end time for the bookin ...

phphtmllaravel

How can jQuery select an element by its id attribute by referencing the href attribute of a different element?

Whenever the user interacts with a div.nav element, jQuery switches its class to active. Presently, it applies display: block to all three of the div.content elements. I aim for jQuery to only apply the display: block property to the div.content elements t ...

jquerycss

The CSS focus-within and hover properties are not functioning as expected

How can I make the search tags visible (the buttons above the text input field) when the search bar below them is clicked? I've tried using :hover, :focus, and :focus-within, but none of them seem to be working. Can someone help me figure out the issu ...

htmlcsscss-selectorshoverfocus

Scroll horizontally on a webpage using drag with JavaScript

I have been working on a unique horizontal website design that allows users to scroll horizontally by dragging the screen. I managed to successfully implement the horizontal scrolling feature, but I am facing difficulties in adding the horizontal drag-to-s ...

javascripthtmljquerycss

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display inf ...

htmlvue.jsvuejs2element-uivue-props

The implementation of SetInterval within nested functions in JavaScript appears to be malfunctioning

I am a beginner in the world of JavaScript and I am currently attempting to incorporate the setInterval method within functions in Js. JavaScript Code: var tar = document.getElementById("sample"); function dataSample(tar) { //setInterval ...

javascripthtml

Creating an HTML table that automatically generates sub rows dynamically

Looking to provide users with the ability to construct a table where they can create expressions. For example, in the expression shown below (((c1 A/O c2) A/O C3) A/O C4), where A/O represents 'And' and 'Or' conditions selected by the u ...

jqueryhtml

Troubleshooting problems with CSS borders and margins in the anchor element

Having a peculiar box-model issue here. My header is filled with links, but despite setting 0px margins, the links are displaying with 2px margins around each one. To demonstrate the problem, I've created a test page located at . Ideally, each link i ...

htmlcss

Absolute positioning causes an element's height to increase

As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...

javascripthtmlcss

Use CSS media queries to swap out the map for an embedded image

Looking to make a change on my index page - swapping out a long Google Map for an embedded image version on mobile. The map displays fine on desktop, but on mobile it's too lengthy and makes scrolling difficult. I already adjusted the JS setting to "s ...

javascriptcssrubygoogle-mapsmedia-queries

Is the Material-UI 1.3 font size failing to adapt to varying screen widths?

Looking to create an app with responsive font sizes using material-ui (v1.3)? Also, want the font size to shrink when the screen size is smaller and adjust automatically. However, the current code doesn't update the font size dynamically as the screen ...

htmlcssreactjsmaterial-ui

There seems to be a problem with Bootstrap 4 Nav-tabs when forms are added inside them, causing

Previously, when the content consisted only of text and you clicked on the nav-tabs link, it displayed the necessary information. However, after adding these forms, the functionality stopped working. It seems like the issue lies with form integrations. Her ...

htmltwitter-bootstrapbootstrap-4input-fieldbootstrap-tabs

Utilize the power of Nuxt and Vue 3 to create sortable columns in a table, with the ability to only change the icons on the sorted column

I am facing a challenge with my sortable table icons. Whenever I click on an icon to sort a column, all the other icons also change direction. I understand that this is happening because I am toggling the visibility of icons based on the currentSortDir sta ...

javascripthtmlvue.jsnuxt.js

Customizing the style of a dropdown menu in React Material UI using NativeSelect

In our previous projects, we have utilized the NativeSelect components. Now, the task at hand involves altering the appearance of the dropdown Menu within the NativeSelect. If we were to switch to using Select instead, employing the MenuProps property wo ...

cssreactjsmaterial-ui

Bootstrap slider aligned to the right side

I'm currently utilizing bootstrap 3 for my website. However, I encountered an issue with the slider when viewing the page on a mobile device as the image was displaying outside the viewport, shifted to the right. Additionally, in Firefox, the slider ...

jquerycsstwitter-bootstrap-3

create a division in the organization of the identification numbers

Is there a way to always change pages when the id changes in a foreach loop to separate the printed pages? Take a look at this code snippet: var data = [ {Id: "552", valor: "50.00", Descricao: "Fraldas", }, {Id: "552", valor: "35.00", Descrica ...

javascripthtmlcss

Changing the class when a checkbox is selected using JQuery

I’m working on a bootstrap switcher and I want to change the panel color from grey to green when the checkbox (switch) is checked. I had it working before, but after updating the switcher, it no longer functions properly. Here is the main code for the s ...

javascriptjqueryhtmlcss

Chrome displaying an extJs Button image

Could it be that Chrome is evolving into the new IE in terms of CSS issues? Here is the code I have for creating ExtJS buttons within an accordion: var button = Ext.create('Ext.Button', { text: '<img src="'+resp.sellers.externa ...

javascriptcssimagegoogle-chromeextjs