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:

https://i.sstatic.net/LtECC.png

My desired outcome looks more like this:

https://i.sstatic.net/3558z.png

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

Progress Bar Modules

What steps should I take to address these styling challenges?

Selenium WebDriver: The challenge of using visibilityOfElementLocated when the element is not actually visible

Tapping on content within SPAN elements with Selenium Webdriver in Java

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

Ways to apply Angular ng-options outside of a select element besides traditional use?

Using Angular to include a forward slash "/" in the text input for a date field

Creating a central navigation menu for a website

Alert: A notification when navigating away from your site

Navigating through sibling elements can be accomplished by using various methods in

The image will remain hidden until it is fully loaded and ready to be displayed

Displaying content generated by Html.Raw in MVC4 using JavaScript and AJAX is causing displacement of content within the <a> tags in the HTML

Is there a way to adjust the size of a video thumbnail to fit within a

What is the best way to target an anchor element that includes a particular word using jquery or css?

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Form using Ajax technology, including two drop-down menus sourced externally

Spooky 'outline' emerges with rounded corners in Internet Explorer 11 and Microsoft Edge

Unusual CSS hierarchy observed post AJAX content load

Stopping video playback when hovering over it

How come my image isn't cooperating with text-align and vertical-align?