Why do my buttons move up and down when I click on them?-CodePudding

I have two drop-down buttons where the Difficulty button will make the Duration button move to the bottom when you click on it; likewise if you click on the Duration button it will move the Difficulty button to the bottom.

What's interesting is when the Difficulty button is clicked first, then the Duration button, both will be the proper height; but if you click the Duration button first, then the Difficulty button, only the Duration button will close its contents and move to the bottom again. This is what my code looks like:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style_MP.css"/>
</head>

<body>
<div >
    <h1>Welcome to My Typing Test!</h1>
    <h2>Select Your Difficulty and Duration</h2>
<div>



    <!--Below, the word "diff" is short for "difficulty" -->
    <!--So "diff-settings" means "difficulty settings" -->
    <!--"diff-options" means "difficulty options" and so on -->
    
<div >
  <button onclick="myfunction01()" >Difficulty</button>
  <div  id="diff-select">
    <a href="beginner">Beginner</a>
    <a href="intermediate">Intermediate</a>
    <a href="advanced">Advanced</a>
    <a href="expert">Expert</a>
  </div>
</div>

<div >
  <button onclick="myfunction02()" >Duration</button>
  <div  id="duration-select">
    <a href="30-seconds">30 Seconds</a>
    <a href="60-seconds">60 Seconds</a>
    <a href="120-seconds">120 Seconds</a>
    <a href="custom">Custom</a>
  </div>
</div>



<script src="script_MP.js"></script>
</body>
</html>

CSS Code:

body{background-color:grey}

.main_page{text-align: center;}

h1{font-size: 50px;}

h2{font-size: 30px; padding-bottom: 40px;}

.difficulty , .duration{
display: inline-block;
margin: 5px;
}


    /* This section is for the Difficulty Button only */

.diff-settings{
padding: 20px;
position: relative;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}


.diff-settings:hover, .diff-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}


.diff-options{
display: none;
font-size: 20px;
width: 130px;
}

.diff-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}

.diff-options a:hover {background-color: darkgreen;}

.show {display: block;}

    

    /* This section is for the Duration Button only */

.duration-settings{
padding: 20px;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
    
    
.duration-settings:hover, .duration-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
    
    
.duration-options{
display: none;
font-size: 20px;
width: 130px;
}
    
.duration-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
    
.duration-options a:hover {background-color: darkgreen;}
    
.show {display: block;}

What should I change in order to stop both buttons from moving to the bottom when they're clicked?

CodePudding user response：

Just add this ;) :

.diff-options, .duration-options {
  position: absolute;
}

When you change the display of a block it was taken into account and moved the following elements. By adding an absolute position, it is no longer taken into account for the calculation of the next element.

CodePudding user response：

Making the parent div of the buttons use flex fixes the problem.

.flex{
    display: flex;
    justify-content: center;
}

<div >
    <!--Below, the word "diff" is short for "difficulty" -->
    <!--So "diff-settings" means "difficulty settings" -->
    <!--"diff-options" means "difficulty options" and so on -->
    
    <div >
    <button onclick="myfunction01()" >Difficulty</button>
    <div  id="diff-select">
        <a href="beginner">Beginner</a>
        <a href="intermediate">Intermediate</a>
        <a href="advanced">Advanced</a>
        <a href="expert">Expert</a>
    </div>
    </div>

    <div >
    <button onclick="myfunction02()" >Duration</button>
    <div  id="duration-select">
        <a href="30-seconds">30 Seconds</a>
        <a href="60-seconds">60 Seconds</a>
        <a href="120-seconds">120 Seconds</a>
        <a href="custom">Custom</a>
    </div>
    </div>
</div>