How To Set Alignment Of Submenu With Respect To Parent Menu

In this article, we will learn about how to set the alignment of the submenu with respect to the parent menu.

First of all, create a navigation menu.

Add the below code in your HTML file to create a navigation menu.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.navbar {
  background-color: #212121; 
}
.mainnav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
}
.mainnav .mainnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  padding: 20px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  list-style: none;
}
.mainnavbtn:hover {
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
}
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  top: 58px;
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
  z-index: 1;
}
.subnav-content a {
  float: left;
  color: #FFFFFF;
  text-decoration: none;
}
.subnav-content a:hover {
  background-color: #eeeeee;
  color: #212121;
}
.mainnavbtn:hover .subnav-content {
  display: block;
}
</style>
</head>
<body>
  <div class="navbar">
    <ul class="mainnav">
    <li class="mainnavbtn"><a href="#">Home <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">About <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#">Gallery <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">Blog <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#contact">Contact</a></li>
    </ul>
  </div>
</body>
</html>

Now, add jQuery to set a starting alignment of the submenu.

jQuery(document).ready(function(){
  jQuery( ".mainnavbtn" ).mouseover(function() {
    var widthAdd = 0;
    var prevwidth = 0;
    var navbarWidth = jQuery('.navbar').width();
    var lengthPreDiv = jQuery(this).prevAll().length;
    for(i=1; i<=lengthPreDiv; i++) {
    prevwidth += widthAdd+parseInt(jQuery(this).parent('ul').children('li:nth-child(' + i + ')').outerWidth(true ));
    }
    var mainwidth = navbarWidth - prevwidth;
    jQuery('.subnav-content').width(mainwidth);
    jQuery('.subnav-content').css({ 'margin-left': prevwidth + 'px' }); 
  });
});

Here, is below full code described.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.navbar {
  background-color: #212121; 
}
.mainnav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
}
.mainnav .mainnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  padding: 20px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  list-style: none;
}
.mainnavbtn:hover {
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
}
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  top: 58px;
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
  z-index: 1;
}
.subnav-content a {
  float: left;
  color: #FFFFFF;
  text-decoration: none;
}
.subnav-content a:hover {
  background-color: #eeeeee;
  color: #212121;
}
.mainnavbtn:hover .subnav-content {
  display: block;
}
</style>
</head>
<body>
  <div class="navbar">
    <ul class="mainnav">
    <li class="mainnavbtn"><a href="#">Home <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">About <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#">Gallery <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">Blog <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#contact">Contact</a></li>
    </ul>
  </div>
<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery( ".mainnavbtn" ).mouseover(function() {
      var widthAdd = 0;
      var prevwidth = 0;
      var navbarWidth = jQuery('.navbar').width();
      var lengthPreDiv = jQuery(this).prevAll().length;
      for(i=1; i<=lengthPreDiv; i++) {
      prevwidth += widthAdd+parseInt(jQuery(this).parent('ul').children('li:nth-child(' + i + ')').outerWidth(true ));
      }
      var mainwidth = navbarWidth - prevwidth;
      jQuery('.subnav-content').width(mainwidth);
      jQuery('.subnav-content').css({ 'margin-left': prevwidth + 'px' }); 
    });
  });  
</script>
</body>
</html>