子菜单不会在父菜单下完全打开

Question

当我将鼠标悬停在菜单点上时，子菜单将在左侧打开，而不是在其父菜单点下方。 我已经尝试过更改位置属性，但是找不到正确的方法。 我得到的最好的结果是，当我将block更改为inline-block时，菜单向右移动。 有没有JavaScript的方法吗？

     Date     Docs
0 2016-06-01  45
1 2016-06-01  56
2 2016-07-01  87
3 2016-07-01  44

nav {
  background-color: cadetblue;
  position: relative;
  height: 60px;
}

ul.fixed {
  background-color: cadetblue;
  font-size: 22px;
  text-align: center;
  position: fixed;
}

ul.fixed li {
  display: inline;
  list-style: none;
  font-family: Bahnschrift;
}

ul.fixed li a {
  text-decoration: none;
  color: aliceblue;
  text-align: center;
  padding: 14px 20px;
}

ul.fixed li a:hover {
  background-color: gray;
  color: cornflowerblue;
  opacity: .8;
}

ul.Untermenue {
  display: none;
  position: absolute;
  background-color: gray;
  margin-left: 0;
  padding: 0;
  opacity: .8;
}

li.Untermenue {
  display: inline;
  position: relative;
}

ul.Untermenue li a {
  color: #D6D6D6;
  display: block;
}

.Dropdown:hover .Untermenue {
  display: block;
}

.Untermenue a:hover {
  background-color: cornflowerblue;
}

Answer 1

尝试使用以下代码更新CSS

CSS

ul.Untermenue {
    display: none;
    position: absolute;
    background-color: gray;
    margin-left: 0;
    padding: 0;
    opacity: .8;
    left: 0;     /* Newly added class */
}

ul.fixed li {
    display: inline;
    list-style: none;
    font-family: Bahnschrift;
    position:relative; /* Newly added class */
}

输出