Prevent submenu from affecting main menu width

Question

I am very much new into learning CSS. Somehow I developed this menu bar. But my sub menu is disturbing my main menu width whenever I am hovering over main menu 'master' or 'party' link. I have done all kind off code scratching, but couldn't find any fault.

Here's the JSFiddle of it - https://jsfiddle.net/0jwtwrec/

.index-main-nav {
  z-index: 5;
  position: fixed;
  margin-top: 83.2px;
  width: 99.95%;
  background-color: #5f5f5f;
  box-shadow: 0 3px 5px grey;
  height: 46px;
}

.index-main-nav li {
  list-style-type: none;
}

.index-main-nav a {
  text-decoration: none;
  color: #ffffff;
  font-size: 19px;
  letter-spacing: 1px;
  cursor: default;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: all 0.3s ease-out;
}

.index-main-nav li:hover>a {
  background-color: #4CAF50;
}

.index-main-nav>ul>li {
  float: left;
  display: inline;
}

.index-main-nav>ul>li>a {
  padding: 10px 30px;
  display: flex;
}

.index-main-nav li:hover .index-sub-menu {
  display: block;
}

.index-sub-menu {
  display: none;
  //width: 120%;
  padding-top: 1px;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background-color: #2e2728;
  border-radius: 0 0 6px 6px;
  transition: all 0.3s ease-out;
}

.index-sub-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.index-sub-menu ul>li:last-child a {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

<div id="index-main-nav-id" class="index-main-nav">

  <ul style="margin: 0; padding: 0;">
    <li><a href="index.php" style="">Home</a></li>
    <li><a style="width: px;">Master</a>
      <div class="index-sub-menu">
        <ul style="margin: 0; padding: 0;">
          <li><a href="?us=<?php echo base64_encode('getUserList');?>&page=<?php echo base64_encode(1);?>">User list</a></li>
          <li><a href="?par=<?php echo base64_encode('getPartyList');?>&page=<?php echo base64_encode(1);?>">Party List</a></li>
          <li><a href="?comp=<?php echo base64_encode('getComponentList');?>&page=<?php echo base64_encode(1);?>">Component List</a></li>
        </ul>
      </div>
    </li>
    <li><a style="width: 110px;">Party</a>
      <div class="index-sub-menu">
        <ul style="margin: 0; padding: 0;">
          <li><a href="?us=<?php echo base64_encode('getUserList');?>&page=<?php echo base64_encode(1);?>">User list</a></li>
          <li><a href="?par=<?php echo base64_encode('getPartyList');?>&page=<?php echo base64_encode(1);?>">Party List</a></li>
          <li><a href="?comp=<?php echo base64_encode('getComponentList');?>&page=<?php echo base64_encode(1);?>">Component List</a></li>
        </ul>
      </div>
    </li>

  </ul>
</div>

Answer 1

Simply setting the sub menu to absolute position.

.index-sub-menu {
  ...
  position: absolute;
}

And adding .index-main-nav > li {position: relative;} as needed.

Note, for comments please use /* comment */ not // comment for plain CSS.

jsFiddle