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。标签＆lt; #nav li.subNav：hover ul＆gt;显示在customFile.css中，＆lt; #nav li.subNav ul＆gt;当我检查计算出的样式时，在自定义和样板文件中显示。

我希望解决两件事;子菜单水平排列（我需要它垂直）并且子菜单不被隐藏。我不得不在ul周围嵌套/ li标记，以便处理一个问题（它们现在在父标记下对齐）。

我也注意到我父母李的身高和宽度发生了变化。我理解它扩展到容纳列表项目，但增加的高度似乎有点奇怪。

Answer 1

这是我解决上述问题的方法

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

在nav上隐藏子菜单

1 个答案: