使子菜单显示在父级下（中心下拉菜单）

Question

我的水平下拉菜单有问题。 sub_menu未出现在其父级下。任何人都可以帮助我做对吗？我究竟做错了什么？我希望菜单100％宽并居中。

nav {
  max-width: 100%;
  text-align: center;
}
nav > ul > li {
  padding: 10px;
  display: inline;
}
nav ul li a {
  font-family: sans-serif;
  font-size: 1em;
  color: #000;
}
nav ul li:hover .sub_menu {
  display: block;
}
.sub_menu {
  display: none;
  position: absolute;
}

<nav>
  <ul>
    <li><a href="#">link 1</a>
    </li>
    <li><a href="#">link 2</a>
      <ul class="sub_menu">
        <li><a href="#">link 2.1</a>
        </li>
        <li><a href="#">link 2.2</a>
        </li>
      </ul>
    </li>
    <li><a href="#">link 3</a>
      <ul class="sub_menu">
        <li><a href="#">link 3.1</a>
        </li>
        <li><a href="#">link 3.2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

两个步骤

1。为position: relative;设置li：

nav > ul > li {
padding: 10px;
display: inline;
position: relative;
}

2。为right: 0;设置ul：

.sub_menu {
display: none;
position: absolute;
right: 0;
}

<强> jsFiddle