协助垂直导航

Question

我正在尝试在HTML文档中创建垂直导航，但我似乎无法使主菜单均匀排列。这是我的垂直导航HTML：

 <div id="navbar">
 <ul>
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a>
 <ul>
 <li><a href="#">Drop 1</a></li>
 <li><a href="#">Drop 2</a></li>
 <li><a href="#">Drop 3</a></li>
 </ul></li>
 <li><a href="#">Menu 3</a></li>
 <li><a href="#">Menu 4</a>
 <ul>
 <li><a href="#">Drop 1</a></li>
 <li><a href="#">Drop 2</a></li>
 </ul></li>
 <li><a href="#">Menu 5</a></li>
 </ul>

 </div>

我的CSS：

#navbar {
margin-left: -40px; 
}

#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}

#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}

#navbar ul li:hover ul{
visibility:visible;
}

这是我的第一篇文章，所以如果我没有以正确的格式发帖，我会道歉。这段代码也来自一个更大的HTML / CSS文件，所以我只是复制/粘贴了我遇到问题的唯一部分。如果我需要发布我正在谈论的截图，我可以这样做。

提前谢谢!!

Answer 1

这里存在一些阻止您期望显示的问题：

First: the fiddle

CSS更改

#navbar li{
list-style: none;
position: relative;
/*width: 209px;*/
padding: 6px;
line-height: 20pt;
cursor: pointer;
    display: block;
}

#navbar li:after {
    content: '';
    display: table;
    clear: both;
}

#navbar ul a {
    display: inline-block;
}

#navbar ul ul{
margin-top: 0;
visibility:hidden;
height: 100px;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -9000px;
}

#navbar ul ul li:first-child {
    padding-top: 0;
}

我们在此处删除了相当多的填充和边距规则，并停止在您前进的li上设置宽度，并在原始代码中以任何方式突破。

然后，我们告诉a和ul元素显示为inline-block，告诉他们他们要在top处垂直对齐并删除{{1}关闭子导航的第一个孩子。

然后，我们通过设置padding-top margin-bottom来将您的后续列表项目拉到它们所属的位置，从而过度补偿列表的高度。

不需要绝对定位，这可能需要一些JavaScript在不同条件下可靠地为您定位所有内容。

希望有所帮助。

Answer 2

演示 - http://jsfiddle.net/uab2hr50/2/

如果您要对齐主菜单下方的子菜单

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#navbar ul {
  border: 1px solid red;
  display: inline-block;
  padding: 6px;
}
#navbar li {
  list-style: none;
  position: relative;
  width: 209px;
  line-height: 20pt;
  cursor: pointer;
}
#navbar ul ul {
  display: none;
  padding: 0;
  border: 0;
}
#navbar ul li:hover ul {
  display: block;
}

＆＃13;

<div id="navbar">
  <ul>
    <li><a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>

      <ul>
        <li><a href="#">Drop 1</a>

        </li>
        <li><a href="#">Drop 2</a>

        </li>
        <li><a href="#">Drop 3</a>

        </li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

      <ul>
        <li><a href="#">Drop 1</a>

        </li>
        <li><a href="#">Drop 2</a>

        </li>
      </ul>
    </li>
    <li><a href="#">Menu 5</a>

    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;