隐藏导航子菜单

Question

我正在尝试创建一个下拉菜单。 我让它工作了一分钟。
我的代码如下：

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

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

我有三个与该页面相关的CSS文件。 一个基本上是字体的Web工具包，另外两个是bowlerplate.css和我的自定义文件customFile.css。 标签<#nav li.subNav：hover ul>出现在customFile.css中，而<#nav li.subNav ul>则在检查计算样式时在回合定制和样板中显示。

我想解决两件事： 子菜单水平排列（我需要使其垂直），并且子菜单没有隐藏。 我必须在ul周围嵌套/ li标记，因此解决了一个问题（它们现在已在父标记下对齐）。

我还注意到我父母李的身高和宽度已经改变。 我知道它会扩展以容纳列表项，但是增加的高度似乎有些奇怪。

Answer 1

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

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