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

【问题标题】：Alignment of sub-menu in dropdown menu navigation下拉菜单导航中子菜单的对齐方式
【发布时间】：2015-12-30 18:21:25
【问题描述】：

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

但子菜单显示与子菜单选项的底部而不是顶部对齐，就像我认为我使用 vertical-align: top; 选择的那样。

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

【问题讨论】：

标签： html css drop-down-menu navigation

【解决方案1】：

我建议使用相对位置和绝对位置，而不是垂直对齐。

在你的 jsfiddle 上：

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

在第 67 行，添加 top: 0;

【讨论】：

【解决方案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>

【讨论】：