Question

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

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

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

Answer 1

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

在你的jsfiddle：

第45行：将显示：内联替换为位置：相对;

在第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;*/
}

并且您在第二级菜单中没有使用位置相对而在顶部：第三级为0，这里代码尝试

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

下拉菜单导航

2 个答案: