下拉菜单导航中子菜单的对齐方式

Question

我有一个带有下拉子菜单的导航菜单栏和一个子菜单选项（菜单 2.3）的子菜单。

但是子子菜单似乎与子菜单选项的底部而不是顶部对齐，因为我认为我是用 vertical-align: top; 选择的。

使用 this jsfiddle 最容易看到。谁能告诉我我做错了什么？

Answer 1

而不是vertical-align，我建议使用相对和绝对位置。

在你的 jsfiddle 上：

在 第 45 行 处：将 display: inline 替换为 position: relative;

在第 67 行，添加top: 0;

Answer 2

只需使用

#nav ul li ul li {
 display: inline;
 position: relative;
}

#nav ul ul li ul {
  position: absolute;
  display: block;
  visibility: hidden;
  vertical-align: top;
  left: 100%;
  top:0;
  /*  margin-top: -32px;*/
}

你知道在二级菜单中不使用相对位置，在第三级菜单中不使用 top:0 代码试试看

.spacer {
  width: 100%;
  clear: both;
}
#nav {
  clear: both;
  width: 100%;
}
#nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
}
#nav ul li {
  list-style: none;
  float: left;
  width: 160px;
}
#nav ul li a {
  display: block;
  padding: 5px 5px;
  background-color: #ea4;
  text-decoration: none;
  text-align: center;
  color: #000;
  font-weight: bold;
}
#nav ul li a:hover {
  background-color: #ccf;
}
#nav ul li a.selected {
  background-color: #eee;
  font-weight: bold;
}
/* Drop-down menu styles */

#nav ul li ul {
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  width: 160px;
  z-index: 1000;
}
#nav ul li ul li {
  display: inline;
  position: relative;
}
#nav ul li ul li a {
  text-align: left;
  padding-left: 10px;
  background-color: #ea4;
}
#nav ul li:hover > ul {
  display: block;
  visibility: visible;
}
#nav ul li ul li a:hover {
  background-color: #ccf;
}
/* Submenu styles */

#nav ul ul li ul {
  position: absolute;
  display: block;
  visibility: hidden;
  vertical-align: top;
  left: 100%;
  top:0;
  /*  margin-top: -32px;*/
}
#nav ul ul li i {
  position: relative;
  float: right;
}

<div id="nav">
  <ul>
    <li><a href="/">Home</a>
    </li>
    <li><a href="/menu1">Menu 1</a>
      <ul>
        <li><a href="/menu1-1/">Submenu 1.1</a>
        </li>
        <li><a href="/menu1-2/">Submenu 1.2</a>
        </li>
        <li><a href="/menu1-3/">Submenu 1.3</a>
        </li>
      </ul>
    </li>
    <li><a href="/menu2/">Menu 2</a>
      <ul>
        <li><a href="/menu2/menu2-1/">Submenu 2.1</a>
        </li>
        <li><a href="/menu2/menu2-2/">Submenu 2.2</a>
        </li>
        <li><a href="/menu2/menu2-3/">Submenu 2.3<i class="fa fa-caret-right"></i></a>
          <ul>
            <li><a href="/menu2/menu2-3/menu2-3-1/">Subsubmenu 2.3.1</a>
            </li>
            <li><a href="/menu2/menu2-3/menu2-3-2/">Subsubmenu 2.3.2</a>
            </li>
          </ul>
        </li>
        <li><a href="/menu2/menu2-4/">Submenu 2.4</a>
        </li>
        <li><a href="/menu2/menu2-5/">Submenu 2.5</a>
        </li>
      </ul>
    </li>
    <li><a href="/menu3/">Menu 3</a>
    </li>
  </ul>
</div>
<div class="spacer"></div>

<div class="container">
  <p>Content Here!</p>
</div>

下拉菜单导航中子菜单的对齐方式

Alignment of sub-menu in dropdown menu navigation

html

css

navigation

drop-down-menu