CSS下拉菜单菜单菜单和子菜单之间的对齐方式

我在如何对齐菜单和子菜单方面遇到了很多问题。我的子菜单出现在下一个菜单项上。 代码如下：

HTML

所以，我们的想法是让第一个菜单项的子菜单出现在下一个菜单项的正下方，而不是下一个菜单项。我几乎在任何地方都试图改变显示和位置，但似乎都不起作用

下面是JSFIDLE：

---

请尝试向.navbar li ul添加剩余保证金：-16.5%

.navbar li ul{
    display: none;
    font-size: 110%;
    margin-top: 40px;
    background-color: white;
    padding:10px;
    font-style: italic;
    position: relative;
    float: left;
    text-align: center;
    margin-left: -16.5%;
}

---

查看此链接：。。希望能有所帮助。谢谢，我会看一看。虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。

.drsalnik {
width:100%;
margin:  auto;
overflow:hidden;
border: 0;
background-color: white;
}

.item {
  height:40px;
  width:16.5%;
  float:left;
  background-position: left top;
  transition:width 0.5s ease;
  font-size: 140%;
  text-align: center;
 border: black solid .5px;
 opacity: 0.8;
}

.drsalnik:hover .item {
  width:16.5%;
  transition:width 0.5s ease;
   opacity: 0.4;
}

.drsalnik .item:hover{
    width:17.5%;
    transition:width 0.5s ease;
    background-position: center;
    text-align: center;
    opacity: 5;
}

.navbar{
    list-style: none;
}

.navbar li{
    display: block;
}

.navbar ul li{
    opacity: 0.6;
    padding-top: 5px;
}

.navbar li:hover {
    opacity: 1;
    display: block;
}

.navbar li:hover .item{
    opacity: 1;
}

.navbar li ul{
    display: none;
    font-size: 110%;
    margin-top: 40px;
    background-color: white;
    padding:10px;
    font-style: italic;
    position: relative;
    float: left;
    text-align: center;
}

.navbar li:hover ul{
    display: inline;
    position: absolute;
    width: 14.5%;
}

.navbar li ul{
    display: none;
    font-size: 110%;
    margin-top: 40px;
    background-color: white;
    padding:10px;
    font-style: italic;
    position: relative;
    float: left;
    text-align: center;
    margin-left: -16.5%;
}