Forgive me for any CSS mishaps as I'm still learning the ropes.
Currently, I'm working on a website with a navbar consisting of several divs. Some of these divs reveal a dropdown list upon hover. However, the issue arises when this action expands the width of the parent div, causing surrounding divs to shift positions. This unwanted resizing seems to match the lengthiest element within the dropdown list. Despite my attempts to adjust positioning properties, nothing has resolved the problem. My main goal is to prevent adjacent divs from moving unexpectedly.
HTML:
<body>
<div class="header" id="banner"></div>
<div class="header" id="navbar">
<div class="nb_item">HOME</div>
<div class="nb_item">ABOUT US
<ul id="abtus_menu">
<li>LA MARTINIERE COLLEGE, LUCKNOW</li>
<li>LA MARTINIERE MODEL UNITED NATIONS</li>
<li>SECRETARIAT</li>
</ul>
</div>
<div class="nb_item">REGISTER
<ul id="rgstr_menu">
<li>INDIVIDUAL</li>
<li>DELEGATION</li>
</ul>
</div>
<div class="nb_item">COMMITTEES
<ul id="comt_menu">
<li>COMMITTEE 1</li>
<li>COMMITTEE 2</li>
<li>COMMITTEE 3</li>
<li>COMMITTEE 4</li>
<li>COMMITTEE 5</li>
<li>COMMITTEE 6</li>
</ul>
</div>
<div class="nb_item">RESOURCES</div>
<div class="nb_item">EVENTS
<ul id="evnt_menu">
<li>KEYNOTE SPEAKERS</li>
<li>SOCIALS</li>
</ul>
</div>
<div class="nb_item">SPONSORS</div>
<div class="nb_item">CONTACT US</div>
CSS:
.html
{
background-color: #FFFFFF;
}
body
{
margin: 0;
padding:0;
}
.header
{
width: 80%;
margin:auto;
padding:0;
display:flex;
}
#banner
{
height: 200px;
width: 80%;
background-color: #EEEEEE;
}
#navbar
{
background-color: #70A5DA;
height: 28px;
}
.menu
{
list-style-type:none;
}
.nb_item
{
display:inline-block;
width:auto;
padding:0px 10px;
color:#FFFFFF;
margin:auto;
text-align:center;
line-height:28px;
}
.nb_item:hover
{
color: #DDDDDD;
cursor:pointer;
}
#abtus_menu li
{
list-style-type:none;
display:none;
}
.nb_item:hover #abtus_menu li
{
display:block;
color: #DDDDDD;
}
#comt_menu li
{
list-style-type:none;
display:none;
}
.nb_item:hover #comt_menu li
{
display:block;
}
#rgstr_menu li
{
list-style-type:none;
display:none;
}
.nb_item:hover #rgstr_menu li
{
display:block;
}
#evnt_menu li
{
list-style-type:none;
display:none;
}
.nb_item:hover #evnt_menu li
{
display:block;
}
.menu li
{
display:inline;
}
View my JSFiddle here: JSFiddle (Zoom out to 50% if necessary)