Adapt tab or dropdown menu to the same width based on either content length

Question

In the horizontal drop down menu using lists my problem is that the drop down menu and its main tab has different width based on its content length.

see image attached:

What i need to be able to do is that content in the drop down has a long word or small word, the tab also has to adapt dynamically based on dropdown content length or vice versa.

 $("li.dropdown a").hover(function () { $(this).parent().toggleClass('zclass'); }); $("li.dropdown:before").hover(function () { $(this).parent().toggleClass('zclass'); }); $(".dropdown-content").hover(function () { $(this).parent().toggleClass('zclass'); }); 

 #other-menu {width:850px; background-color:#eee;} #other-menu li{ list-style:none; float:left; padding:10px;} li a, .dropbtn { display: block; color: #828282; text-decoration: none; } li.dropdown { display: block; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position:relative; } .dropdown-content { display: none; position: absolute; background-color: #fff; min-width: 100%; white-space: nowrap; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 999999; padding: 5px 7px; margin-top: 15px; margin-left: -9px; height: auto; top: 25px; font-family: 'Fira-Sans-Semibold', sans-serif; text-transform: uppercase; border-top: 1px solid #ccc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;s } .dropdown > .dropdown-content a { padding: 3px 6px; text-decoration: none; text-align: left; font-size: 12px; letter-spacing: 1px; } .zclass { z-index: 200; } .dropdown > .dropdown-content a:hover,.dropdown > .dropdown-content a:focus { color:#5A5A5A !important; text-decoration: none;} .dropdown:hover:before { min-width: 100%; height: 50px; content:''; position:absolute; /* set styling box to be absolute position to not affect parent */ z-index:-1; /* set it behind the parent */ /*copy the properties the parent had*/ border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; /* use positioning to grow its size in relation to parent */ top:-5px; bottom:-5px; left:0; right:-15px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background: #fff; border: 1px solid #eeeeee; } .dropdown a:hover { text-decoration: none; color: #828282 !important; } .dropdown:hover .dropdown-content { display: block; } #other-menu { z-index: 2000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="other-menu" class="hidden-xs"> <li><a href="#">Home</a></li> <li class="dropdown"> <a class="dropbtn" href="#">News</a> <div class="dropdown-content"> <a href="#">national</a> <a href="#">international</a> <a href="#">states</a> <a href="#">cities</a> </div> </li> <li class="dropdown"> <a class="dropbtn" href="#">opinion</a> <div class="dropdown-content"> <a href="#">cartoon </a> <a href="#">columns </a> <a href="#">editorial </a> <a href="#">interview </a> <a href="#">lead </a> <a href="#">letters </a> <a href="#">States </a> <a href="#">cities </a> <a href="#">National </a> <a href="#">International </a> <a href="#">States </a> <a href="#">cities </a> <a href="#">National </a> <a href="#">International </a> <a href="#">States </a> <a href="#">cities </a> </div> </li> <li class="dropdown"> <a class="dropbtn" href="#">States</a> <div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Thiruvananthapuram</a> </div> </li> <li class="dropdown"> <a class="dropbtn" href="#">Cities</a> <div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Karnataka</a> </div> </li> <li class="dropdown"> <a class="dropbtn" href="#">World</a> <div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Karnataka</a> </div> </li> <li class="dropdown"> <a class="dropbtn" href="#">Opinion</a> <div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Karnataka</a> </div> </li> <li class="dropdown"> <a class="dropbtn" href="#">Life &amp; Style</a><div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Karnataka</a> </div></li> <li class="dropdown"> <a class="dropbtn" href="#">Entertainment</a><div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Karnataka</a> </div></li> <li class="dropdown"> <a class="dropbtn" href="#">EBusiness</a><div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Karnataka</a> </div></li> <li class="dropdown"> <a class="dropbtn" href="#">ESport</a><div class="dropdown-content"> <a href="#">Tamil Nadu</a> <a href="#">Andha</a> <a href="#">Kerala</a> <a href="#">Karnataka</a> </div> </li> </ul> 

Fiddle demo

Answer 1

Im find a solution base on Jquery and I'm still working to find an pure Css option.

Edit:

and i find a css solution with small changes in your html!

Im change your html li block to this:

<li class="dropdown">
  <div class="holder">
    <a class="dropbtn"  href="#">News</a>
    <div class="dropdown-content">
      <a href="#">national</a>
      <a href="#">international</a>
      <a href="#">states</a>
      <a href="#">cities</a>
    </div>
  </div>
</li>

And change your css to this:

#other-menu { 
  display: flex;
  width:850px; 
  background-color:#eee;
}

#other-menu li { 
  list-style:none;
}

li a, .dropbtn {
    display: block;
    color: #828282;
    text-decoration: none;
}

.dropbtn {
  padding: 10px;
  white-space: nowrap;
}

.dropdown {
  position: relative;
}

.dropdown-content {
    display: none;
    position: relative;
    background-color: #fff;
    min-width: 100%;
    white-space: nowrap;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999999;
    padding: 5px 0;
    height: auto;
    top: 0px;
    font-family: 'Fira-Sans-Semibold', sans-serif;
    text-transform: uppercase;
    border-top: 1px solid #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;s
}
.holder > .dropdown-content a {
    padding: 3px 6px;
    text-decoration: none;
    text-align: left;
    font-size: 12px;
    letter-spacing: 1px;
}

.zclass {
  z-index: 200;
}

.holder > .dropdown-content a:hover,.dropdown > .dropdown-content a:focus { color:#5A5A5A !important; text-decoration: none;}

.holder:hover {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.holder a:hover {
  text-decoration: none; color: #828282 !important; 
}

.holder:hover .dropdown-content {
    display: block;
}

#other-menu {
  z-index: 2000;
}

Css Fiddle demo

---

This is example get your dropdown width and insert into the closest tab (the parent tab), check it out.

My Jquery option:

$(function(){
    $('.dropdown-content').each(function(){
    var dropdownWidht = $(this).width();
    $(this)
    .closest('.dropdown')
    .find('.dropbtn')
    .css('width', dropdownWidht);
  })
})

Jquery Fiddle demo