I am facing an issue with the width of the ul elements in my navigation bar. The first ul has a width equal to the width of the words plus a margin-right of 50px, while the bottom ul has a fixed width of 200px. The problem arises when the top ul's width is 180px and I hover over it. In this scenario, the top ul expands to match the bottom ul's width of 200px, causing the right side to protrude and push the list items.
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
}
.navbar-tab {
margin: auto;
width: 1300px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.navbar-tab-1 {
padding-right: 50px;
}
ul li {
list-style: none;
height: 50px;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 19px;
font-weight: 400;
line-height: 50px;
float: left;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.hover-list li {
font-size: 15px;
background-color: #e2e2e2;
width: 200px;
text-indent: 20px;
}<nav id="navbar">
<ul class="navbar-tab">
<li class="navbar-tab-1">Home</li>
<li class="navbar-tab-1">Diamond Search
<ul class="hover-list">
<a>
<li>GIA Diamond Search</li>
</a>
<a>
<li>Diamonds</li>
</a>
</ul>
</li>
<li class="navbar-tab-1">Wedding Bands</li>
<li class="navbar-tab-1">Engagement Rings</li>
<li class="navbar-tab-1">Selection Guide</li>
<li class="navbar-tab-1">Jewellery Services</li>
</ul>
</nav>