在导航上隐藏子菜单

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

<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文件。一个基本上是一个字体的网络工具包，另外两个是bowlerplate.css和我的自定义文件customFile.css。标签< #nav li.subNav：hover ul>显示在customFile.css和< #nav li.subNav ul>在检查计算样式时在自定义和样板文件中显示。

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

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

来源

2014-10-09 JZeig1

好了，看到没有人愿意帮助我以前的帖子，这里有几个问题。我已经使用可见性隐藏了ul：隐藏在li.subNav ul选择器上，但背景仍然显示。有关如何将背景返回到mainNav大小的任何建议。 – JZeig1 2014-10-18 13:16:10

这里是我的解决上述问题

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

来源

2014-10-24 12:39:04 JZeig1

在导航上隐藏子菜单

回答

相关问题