使子菜单出现在父菜单下(中央下拉菜单) [英] Make submenu appear under parent (center drop down menu)

问题描述

我的水平下拉菜单有一些问题. sub_menu不会出现在其父项下.谁能帮我弄好它?我究竟做错了什么?我希望菜单为100％宽且居中.

I have some problem with my horisontal drop down menu. The sub_menu is not appearing under its parent. Can anyone help me get it right? What am I doing wrong? I want the menu to be 100% wide and centerd.

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>

推荐答案

两步

1.将position: relative;设置为li:

1. Set position: relative; for li:

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

2.将right: 0;设置为ul:

2. Set right: 0; for ul:

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

jsFiddle

jsFiddle

这篇关于使子菜单出现在父菜单下(中央下拉菜单)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！