Тема: при наводці на кнопку інша міняє своє місцеположення
чомусь при наводці на одну кнопку, інша міняє своє місцеположення і спускається вниз. Не знаю що з цим робити.
це html
<html lang="uk">
<head>
<title>СЗШ №63</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>СЗШ №63</h1>
<div class="aboutschool">
<button class="button1">Про школу</button>
<div class="aboutschool-child">
<a href="">Підрозділ 1</a>
<a href="">Підрозділ 2</a>
<a href="">Підрозділ 3</a>
<a href="">Підрозділ 4</a>
<a href="">Підрозділ 5</a>
</div>
</div>
<div class="education">
<button class="button2">Освіта</button>
<div class="education-child">
<a href="">Підрозділ 1</a>
<a href="">Підрозділ 2</a>
<a href="">Підрозділ 3</a>
<a href="">Підрозділ 4</a>
<a href="">Підрозділ 5</a>
</div>
</div>
</body>
</html>а це css
h1 {
text-align: center;
}
.button1 {
background-color: #40E0D0;
color: black;
border-style: solid;
cursor: pointer;
padding: 20px;
margin-top: 50px;
}
.aboutschool {
position: relative;
display: inline-block;
}
.aboutschool-child {
display: none;
background-color: black;
min-width: 50px;
}
.aboutschool-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.aboutschool:hover .aboutschool-child {
display: block;
}
.button2 {
background-color: #40E0D0;
color: black;
border-style: solid;
cursor: pointer;
padding:20px;
margin-top:50px;
}
.education {
position: relative;
display: inline-block;
}
.education-child {
display: none;
background-color: black;
min-width: 50px
}
.education-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.education:hover .education-child {
display: block;
