css - 无法在 nav 的 li 中垂直对齐 ul

Question

我试图在 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>

我在 visibility 方面遇到了问题，但已经解决了。现在我需要让子列表垂直对齐。这是 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; margin :0px，自动；文本对齐:居中；垂直对齐:中间；列表样式类型:无；和#nav li.subNav ul =可见性:隐藏； & 显示: block 被覆盖。我可以对这个标签做些什么来让列表项垂直对齐而不是水平对齐。

Answer 1

移除 float:left 形式 #nav li.subNav:hover ul li

Js Fiddle

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

同时移除浏览器默认的margin和padding

ul{
    margin:0;
    padding:0;
}

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

*{
    margin:0;
    padding:0;
}