How to display text in the middle of div with different background color?

Question

I want help as i cannnot do this Please see this : https://i.stack.imgur.com/JNZkT.jpg

What i get : https://i.stack.imgur.com/nW17o.jpg

    <style>
        .Nav_bar_links div{
            margin: 0% 1%;
            font-weight: 500;
            display:inline-table;   
        }
        .Nav_bar_links div:hover{
            background: #222222;
            color: #E50000;
        }
    </style>

    <div class="Navigation_bar">
                <img src="images/w-logo-1.png" height="7%" width="7%" align="middle">
                <div class="Nav_bar_links" align="right">
                    <div class="active">HOME</div>
                    <div class="add_on">ABOUT&nbsp;<i class="fas fa-caret-down"></i></div>
                    <div>SPONSORS</div>
                    <div>GALLERY</div>
                    <div>NEW &amp; UPDATES</div>
                    <div>CONTACT US</div>
                    </div>
            </div>

I want to achieve that same Please help !!!!!!

Answer 1

I would encapsulate your menu items in a span and then target that DOM element. Here is a snippet example:

.Nav_bar_links div {
 margin: 0% 1%;
 padding: 20px 10px;
 font-weight: 500;
 display: inline-block;
}
.Nav_bar_links div:hover {
 background: #222222;
 color: #e50000;
}
.Nav_bar_links div:hover span {
 padding-bottom: 5px;
 border-bottom: 3px solid #FF0000;
}

<div class="Navigation_bar">
 <img src="images/w-logo-1.png" height="7%" width="7%" align="middle">
 <div class="Nav_bar_links" align="right">
  <div class="active"><span>HOME</span></div>
  <div class="add_on"><span>ABOUT</span>&nbsp;<i class="fas fa-caret-down"></i></div>
  <div><span>SPONSORS</span></div>
  <div><span>GALLERY</span></div>
  <div><span>NEW &amp; UPDATES</span></div>
  <div><span>CONTACT US</span></div>
 </div>
</div>