问题与下拉菜单

Question

我对子菜单有一个问题，当我在大约部分上空盘旋时，下拉菜单宽度超出了它的预期。 我做错了什么以及如何解决它？ 任何其他与我的css代码相关的建议都将不胜感激。

JSFIDDLE

这是我的代码：

* {
  margin: 0;
  padding: 0;
}

.main-nav ul {
  margin-left: 40px;
  margin-top: 40px;
  list-style-type: none;
}

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

.main-nav .active {
  background-color: #0361D6;
}

.main-nav li a {
  text-decoration: none;
  font-size: 18px;
  font-family: Verdana;
  color: white;
}

.main-nav ul li {
  padding: 20px 30px 20px 30px;
  background-color: #066EFC;
}

.main-nav>ul>li {
  border-right: 1px solid #0858C5;
}

.main-nav ul>li:last-child {
  border-right: none;
}

.main-nav li {
  border-bottom: 3px solid #0B418B;
}

.main-nav li:hover {
  cursor: pointer;
  background-color: #0361D6;
  color: #C4C4C4;
}

.sub-nav ul {
  display: none;
}

.sub-nav li {
  border-bottom: 1px solid black;
}

.sub-nav {
  padding: 0px;
  float: none;
  position: absolute;
  top: 65px;
  left: 85px;
  overflow: hidden;
}

nav ul li:hover ul {
  display: block;
}

<nav class="main-nav">
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <nav class="sub-nav">
        <ul>
          <li><a href="#">Company</a></li>
          <li><a href="#">Workers</a></li>
        </ul>
      </nav>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

  

我得到了可能正在寻找的解决方案 。请参阅以下链接......

https://jsfiddle.net/Dhruvil21_04/x40psw2c/1/

或

替换下面给出的4个css selctors ......

/*--------Replace-------*/

.sub-nav {
    padding: 0px;
    float:none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow: visible;
    width: 100%;
}
.main-nav li:hover {
    cursor:pointer;
    background-color: #0361D6;
    color: #C4C4C4;
    position: relative;
}

/*--------Add-------*/

.main-nav ul ul > li {
    padding: 20px 10px;
    text-align: center;
}
.main-nav ul ul {
    margin: 0;
    padding: 0;
    left: 0;
}