Я хочу, чтобы текст в кнопке изменился, и когда он изменит текст, размер изменится, и я хотел бы, чтобы с ним менялись размеры раскрывающегося списка. Вот пример того, как обстоят дела сейчас. Как будто я хочу, чтобы он был того же размера (https://youtu.be/eSg_guYq-HA)
<html>
<body>
<div class="container" id="selection">
<nav>
<div class="dropdown">
<button
class="btn btn-default dropdown-toggle navbar-left"
type="button"
id="button"
data-toggle="dropdown"
>
hxbxbbxsmbxndjdbdnd
</button>
<ul class="dropdown-menu" data-toggle="dropdown" id="dropdown">
<div style="height: 4px;"><br /></div>
<li class="disabled" id="dropdown-text">
<a
href="#"
target="_parent"
style="color: #d5d3d0; text-decoration: none;"
><h6>Videos</h6></a
>
</li>
<li class="active" id="dropdown-text">
<a
href="#"
target="_parent"
style="color: #d5d3d0; text-decoration: none;"
><h6>Tweets</h6></a
>
</li>
<li id="dropdown-text">
<a
href="#"
target="_parent"
style="color: #d5d3d0; text-decoration: none;"
><h6>Communites</h6></a
>
</li>
<div style="height: 2px;"><br /></div>
</ul>
</div>
</nav>
</div>
</body>
</html>
#button {
background-color: #232628;
position: fixed;
left: 4.5rem;
font-size: 19px;
padding: 0px 0px 0px 5px;
font-family: "Source Sans Pro", sans-serif;
color: #d5d3d0;
min-width: 9.35rem;
text-align: left;
}
#selection {
position: fixed;
margin-top: -0.925rem; /* button */
color: #232628;
width: 22px;
left: 3.4rem;
}
#dropdown-text {
text-align: center;
font-family: sourcesanspro;
font-weight: bold;
}
#button:focus {
outline: 0;
box-shadow: 0 0 0px 0px rgba(213, 211, 208, 1);
background-color: green;
}
#dropdown {
border: 0px solid rgba(0, 0, 0, 0.15);
margin: 1.65rem 0.17rem 0;
min-width: 9.35rem;
float: right;
background-color: green;
border-radius: 0% 0% 25% 25%;
padding: 0 0;
}
.dropdown .dropdown-menu {
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 1s;
max-height: 0;
display: block;
overflow: hidden;
opacity: 100;
}
.dropdown.show .dropdown-menu {
/* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
max-height: 300px;
opacity: 1;
}
я знаю, что мой код немного сумасшедший Я немного новичок в этом, поэтому я не не знаю, что делаю.