How can I prevent the expansion of elements in a drop-down menu when using display:

I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily?

Additionally, is there a way to ensure that the drop-down boxes align with the main header itself? Here's the code pen for reference:

CSS:

.square-link
{
    z-index: 80;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.square-link a
{
    border: 2px solid #373737;
    border-radius: 5px 5px 5px 5px !important;
    color: #373737;
    background-color: transparent;
    font-size: calc(7px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    text-align: center;
    padding: 6px;
    padding-right: 2vw;
    padding-left: 2vw;
    margin-right: 1vw;
    margin-bottom: 3%;
}

.square-link a:hover, .square-link a.active
{
    background-color: #373737;
    color: #ffffff;
    transition: 0.2s
}

.dropbtn {
    border: 2px solid #373737;
    border-radius: 5px 5px 5px 5px !important;
    color: #373737;
    background-color: transparent;
    font-size: calc(7px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    text-align: center;
    padding: 6px;
    padding-right: 2vw;
    padding-left: 2vw;
    margin-right: 1vw;
    margin-bottom: 3%;
  cursor: pointer;
  overflow: hidden;
  transition: 0.2s;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 75 !important;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 100 !important;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 75 !important;
  border: none;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  color: white;
  background-color: #373737;
  transition: 0.2s;
}

.caret-down
{
    color: #373737;
}

HTML:

<link rel="stylesheet" href="//libapps-custom.library.curtin.edu.au/css/fontawesome.min.css?ver=5.8.11">
<div class="contentbox">
    <div class="square-link">
        <a href="">Header One</a>
<div class="dropdown">
  <button class="dropbtn">Header Two<i class="fa fa-caret-down"></i></button>
  <div class="dropdown-content">
  <a href="">1</a>
  <a href="">2</a>
    <a href="">3</a>
  <a href="">4</a>
  <a href="">5</a>
  </div>
</div>
 <a href="">Header Three</a>
<a href="">Header Four</a>
<a href="">Header Five</a>
    </div>
</div>

https://codepen.io/adms2000/pen/bGVJjNa

htmlcssflexboxfrontend

Answer №1

Make sure to include flex-start; in the .rectangle-link section for it to function as desired.

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

css boxShadow merger

Looking to create a sleek horizontal navigation bar using an unordered list with list items representing each element: To ensure the elements fit perfectly within the bar, I set the width of each at 25% and added a box-shadow for a border. Using a traditi ...

htmlcss

Modify the CSS using JavaScript after a brief delay

I'm creating a homepage that includes animations. Inside a div, I initially have display: none, but I want it to change to display: block after a few seconds. I've been trying to use JavaScript for this purpose, but I'm struggling to find th ...

javascriptcss

Create a dynamic effect by adding space between two texts on the page

const Button = () => { const options = ['test1', 'test2', 'test3']; return ( <div style={{ position: 'absolute', left: '8px', width: 'auto', flexDirection: 'row' ...

javascriptcssreactjsarrays

Custom Sizing for Bootstrap Modals

I need assistance with creating a dynamic bootstrap modal that adjusts its width based on the content and includes a vertical scrollbar when needed. Although the vertical scrollbar is functioning correctly, the horizontal width appears to be static. C ...

csstwitter-bootstrap

Run a JavaScript function in 5 seconds

I'm looking to execute this function after a 5-second delay: $(document).ready(function() { $("#signInButton").trigger('click'); }); Your assistance is greatly appreciated. ...

javascriptjqueryhtmlajaxclick

Styles created using makeStyles in MUI are no longer working properly following an update to both MUI and React versions

Implementing the MUI Dropdown in a components library. When testing the library in Storybook, everything functions properly. However, when integrating the component into a separate React project, the layout becomes distorted. The Dropdown label is posit ...

cssreactjsnpmmaterial-uimakestyles

Envelop the phrases onto a fresh line

I'm having trouble getting the text inside a div to display correctly. When the text is too long, it just keeps stretching instead of breaking into new lines. How can I make sure that the content displays as a block within the div? Thank you. .box ...

htmlcss

Delete a product from the cart when the selection in the dropdown changes

In the process of creating an e-commerce platform, I am implementing a feature that allows users to choose items from a dropdown menu based on their category. However, I want to restrict users from adding more than one item per category. If a user tries to ...

phpjqueryajaxhtml

Ways to restrict the content div JSON display to only three items

Is it possible to limit the display of items from JSON in the content div to just three? The current code displays all downloaded items, but I want only 3 divs to be returned. <div id="p"></div> $.getJSON('element.json', function(d ...

javascriptjqueryhtmljson

Change the class upon clicking the element

Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. ...

javascripthtmljquerycss

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

javascripthtmlcssshinyhtml5-canvas

Transferring information from an HTML page to a PHP script

I am facing a dilemma with my current PHP script that is called from an HTML link. The setup requires the script to accept non-user input from the page, specifically static data already present. The line calling the script appears like this. <div class ...

phphtmlajaxforms

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

cssreactjsstyled-components

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

phphtmlcss

What is the best way to execute a Java program from a PHP webpage after submitting a form?

I have a .php page where I am trying to run a Java program in the backend after submitting a form. I have attempted using exec() and system() functions, but unfortunately it is not working as expected. Can someone please provide assistance with this issue? ...

javaphphtml

Place the element at the bottom of the row above

I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using: <div class="col-sm-6 col-md-4" ng-repeat="activity in activities"> <img ng-src="[[ act.icon ]]" height="100" alt=""> <h3>[ ...

htmlcssangularjs

Using HTML and CSS to capture user input data and store it in an array

I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcss

Utilize PHPMailer to send pre-designed email templates

Apologies for the recurring queries. I'm still struggling to find a solution to this issue. Here's my Query: I have a form that allows users to choose between predefined and custom templates. The select option determines which template is displ ...

phphtmlemailtemplatesphpmailer

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage

Convert HTML content to a PDF file with Java

Welcome to the community! My project involves extracting data from a website containing information on various chemical substances and converting it into a PDF while preserving the original HTML formatting, including CSS styles. For example, here is a li ...

javahtmlcsspdf