Here is the code for a specific page:
HTML:
<div class=main>
<div class=bttn>
<button>abcdef</div>
<div class=content>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
</div>
</div>
<button>abcdef
<button>abcdef
<button>abcdef
</div>
CSS :
button {
border: 3px solid red;
border-collapse: collapse;
padding: 16px;
background-color: blue;
width: 25%;
margin: 0px -1px 0px -1px display: inline;
}
.content {
display: none;
}
.bttn + .content {
display: none;
}
.bttn:hover + .content {
display: block;
}
Upon running the code, the first button appears on a separate line while the remaining buttons align themselves next to each other on the following line. This behavior persists even if hidden divs are added to other buttons. I have attempted changing the display property of the button tag, bttn class, and content class to inline with no success. It could be related to the position property, but I am uncertain. Any insights into what might be going wrong here would be greatly appreciated.