无法在导航中的 li 内垂直对齐 ul答案

【问题标题】：Can't vertically align ul within li in nav无法在导航中的 li 内垂直对齐 ul
【发布时间】：2014-12-14 14:10:11
【问题描述】：

我正在尝试在 li 中垂直对齐 ul(subNav.ul)。

 <nav id="nav">
   <ul>
       <li class="subNav"><a href="somePage1.php">Some Page1</a>
          <ul>
              <li><a href="relatedPage1">Related Page1</a><li>
              <li><a href="relatedPage2">Related Page2</a><li>
          </ul>
       <li>
   </ul>
  </nav>

我遇到了可见性问题，但解决了。现在我需要让子列表垂直对齐。这是 CSS：

#nav li.subNav ul {  display: block; visibility: hidden;}|
#nav li.subNav ul li {  display: None;  visibility: hidden;}
#nav li.subNav:hover ul li {  visibility: visible;  display: block; float: left;}

'设置属性'是#div1 #nav ul = display: inline-block;边距：0px，自动；文本对齐：居中；垂直对齐：中间；列表样式类型：无；和 #nav li.subNav ul = 可见性：隐藏； & 显示：块被覆盖。我可以对这个标签做些什么来让列表项垂直对齐而不是水平对齐。

【问题讨论】：

请创建一个工作代码sn-p。
sn-p 是什么意思。我怎么做？还是我们只是在询问更多细节？
这是自定义样式表。 jsfiddle.net/jzeig1/k4gx33nx这里是另一个样式表：jsfiddle.net/jzeig1/kzue4z75以上是nav和subNav结构的整体结构
@emmanuel Hay，感谢您的帮助。我已经布置了大部分代码，当我将鼠标悬停在 subNav li 子菜单上时，顶级菜单会扩展到子菜单中项目的宽度。如果我能让 subNav:li 垂直排列，那可能会有所帮助。 TIA

标签： css menu navigation html-lists

【解决方案1】：

从#nav li.subNav:hover ul li中删除float:left

Js Fiddle

#nav li.subNav:hover ul li {
    visibility: visible;
    display: block;
}

同时删除浏览器提供的默认 margin 和 padding

ul{
    margin:0;
    padding:0;
}

你也可以使用通用选择器来移除浏览器给定的所有元素的默认样式

*{
    margin:0;
    padding:0;
}

【讨论】：

我仍在尝试让顶级菜单下方的 li 垂直排列。请查看先前注释语句中的代码，如果您发现某些内容缺失或不合适，请告诉我

【解决方案2】：

这是我对上述问题的解决方案

 #nav li.subNav:hover ul li {
      visibility: visible;
      width:  171px;
      padding: 0;
      cursor: pointer;
      float: none !important;
      display: block !important;
  }

我还找到了一种方法来保持菜单 - 一旦可见 - 从页面向下移动“body #main”

  #nav li.subNav ul {
       display: block;
       visibility: hidden;
       position: absolute;
   }

【讨论】：