Increase the dropdown size without altering the dimensions of the container

Question

Increase the dropdown size without altering the dimensions of the container

I have a dropdown menu enclosed in a div with a vibrant yellow background. Take a look at the code on Plunker here.

Upon clicking the dropdown button, the list expands and the container's height increases as well. The background color of the dropdown items is painted in yellow.

To style the list items, I have included a z-index property like so:

<div class="drp-down-cnt" style="z-index:1000;">

This change results in the following appearance:

My desired outcome looks more like this:

In summary, only the background of the drop-down button should be yellow, while the background of the dropdown list items should be white or gray.

html css

Answer 1

Answer №1

To restrict the height of the background container, you can do the following (view example):

.drp-down-bgnd {
   height: 48px;
 }

Alternatively, you can change the position to absolute to avoid affecting the container's height (view example):

.drp-down-cnt{
   position: absolute;
   width: 158px !important;
 }

Answer 2

To restrict the height of the background container, you can do the following (view example):

.drp-down-bgnd {
   height: 48px;
 }

Alternatively, you can change the position to absolute to avoid affecting the container's height (view example):

.drp-down-cnt{
   position: absolute;
   width: 158px !important;
 }

Increase the dropdown size without altering the dimensions of the container

Answer №1

Similar questions

Issues with Google Fonts failing to load correctly

Differentiate between minimum and maximum values on ion-range sliders with discrete color options

Centered HTML Columns on the Screen

My objective is to show the div element just once using AngularJS

Using the Position Sticky feature in Next.js

Steps for extracting HTML content from a beautiful soup object

container dimensions for images

Symfony: The Database Query Button with a Pop-up Feature

The list in the navbar is misaligned and not centered vertically within the flex container

When the ID and anchor link within a URL fail to scroll to the specified anchor location

What is the best way to conceal a canvas or another item?

Ensure that the content fills the entire height of the container and include a scrollbar

Using a PHP variable to dynamically change the style sheet by connecting to a MySQL database

The loading time for the Docker index HTML file page is unacceptably slow

Experience the smooth CSS3 transition effects on iOS devices such as iPhones and iPads. Elevate the appearance of DOM objects with

I can't seem to get the dropdown list to appear. What could be the issue?

Mysterious issue with loading images in HTML and PHP

Android mobile browser lacks visibility of certain elements

Using jQuery to add or remove multiple classes at once

Every iteration and vertical lines