Я нашел странную проблему.Пожалуйста, посмотрите на мою фотографию, где я пытаюсь объяснить проблему:
Почему браузер показывает эту проблему при изменении области просмотра, которую я не знаю,я просто знаю, что если я удаляю "margin: 0 auto;"для HTML-элемента "#topbox", то он не делает этого, он перестает показывать другой стиль для выпадающего меню, но вопрос позиционирования моего HTML-элемента "#topbox" в середине без выражения css "margin auto", возможно, является вопросомна данный момент все это так странно, как часто с css.
У меня есть мой HTML и CSS-код, если вы хотите попробовать это:
#topbox {
width: 90%;
margin: 0 auto;
height:100px;
border: 5px solid green;
position: relative;
text-align: center;
}
#ContactSymbol {
position:absolute;
right:15px;
top:25px;
width:50px;
height:50px;
color:white;
font-size:20px;
padding:7px;
border-radius:50px;
border: 1px solid white;
}
.dropdown-content {
display:none;
position: absolute;
right: -5px;
top: 31px;
background-color: #003A7E;
border-radius: 10px 0 10px 10px;
border: 0.5px solid #00007E;
min-width: 268px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 0;
font-size:0.9em;
text-align:left;
z-index: 1;
cursor:default;
}
#ContactSymbol:hover .dropdown-content {
display:block;
}
.DropdownUeberschrift {
display:block;
font-weight:bold;
background:blue;
padding:7px;
border-radius:10px 0 0 0;
}
.DropdownEintrag {
display:block;
padding:8px;
font-size:0.85em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="test">
<title>Test</title>
</head>
<body style="background:#003A7E">
<div id="topbox">
<div id="ContactSymbol">Phone
<p class="dropdown-content">
<span class="DropdownUeberschrift">Kontakt</span>
<span class="DropdownEintrag">Telefon: 121768</span>
</p>
</div>
</div>
</body>
</html>