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>

我遇到了可见性方面的问题，但却解决了这个问题。现在我需要让子列表垂直对齐。这是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;}

'set properties'是＃div1 #nav ul = display：inline-block;保证金：0px，auto; text-align：center; vertical-align：middle; list-style-type：none; 和#nav li.subNav ul = visibility：hidden; ＆安培; display：阻止覆盖。我可以对此标记做些什么来使列表项垂直对齐而不是水平对齐。

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

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

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

2 个答案: