css - 水平下拉导航纯CSS

Question

我在一个带有水平下拉导航的网站上工作，但它没有正常工作。

在将鼠标悬停在第一个导航上之前，我无法隐藏第二个导航。我知道我需要直系后代。此外，当当前页面在导航栏上时需要显示，但我无法解决!

我现在拥有的 css 在下面。我无法告诉你我多么感激任何帮助。

站点是:http://www.lifetimetraining.co.uk/

#navSection{
background:#fff url(../images/topNavBg.png) repeat-x scroll 0 0;
clear:both;
color:#fff;
height:87px;
position:relative;
width:1000px

#navSection a{
color:#fff

#primaryNav li{
border-right:1px solid #6a8db3;
float:left;
font-size:.83em;
font-weight:bold;
height:56px;
line-height:1.1em;
width:169px

#primaryNav li a{
display:block;
height:36px;
padding:10px 0 10px 20px;
text-decoration:none;
width:150px

#primaryNav li strong{
display:block;
font-size:1.5em;
line-height:1.06em

#primaryNav li ul.secondLevel{
clear:both;
border-radius:0 0 14px 14px;
-moz-border-radius:0 0 14px 14px;
-webkit-border-radius:0 0 14px 14px;
height:31px;
left:-99999px;
line-height:31px;
padding:0;
position:absolute;
top:56px;
width:1000px

#primaryNav li ul.secondLevel li{
position:relative;
width:auto

#primaryNav li li.first a{
border-radius:0 0 0 14px;
-moz-border-radius:0 0 0 14px;
-webkit-border-radius:0 0 0 14px;
padding-left:20px

#primaryNav li.current ul{
left:0;
z-index:3

#primaryNav ul li{
border:none;
font-size:1.2em;
height:31px;
width:auto

#primaryNav li ul a{
display:block;
float:left;
font-size:.9em;
font-weight:bold;
height:31px;
line-height:31px;
padding:0 10px;
text-decoration:none;
width:auto

#primaryNav li.firstLevel.current>a,#primaryNav li.firstLevel:hover>a{
background:#00a3a8 url('../images/colour3Gradient.png') repeat-x scroll 0 0

#primaryNav li.current ul,#primaryNav li.current ul li a{
background-color:#00a3a8

#primaryNav li.current li:hover a,#primaryNav li.current li.current a{
background-color:#00b7bc

#primaryNav li.firstLevel ul li ul.thirdLevel,
#primaryNav li.firstLevel ul li ul.thirdLevel li,
#primaryNav li.firstLevel ul li ul.thirdLevel li a{
border-radius:none

#primaryNav li.firstLevel ul li ul.thirdLevel{
min-width:210px;
display:block;
position:absolute;
top:31px;
left:0;
visibility:hidden;
background-color:#51c5c3;
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px

#primaryNav li.firstLevel ul li ul.thirdLevel li{
font-size:1em;
display:block;
width:auto;
float:left;
clear:left;
height:auto

#primaryNav li.firstLevel ul li ul.thirdLevel li a{
background:none;
height:auto;
display:block;
padding:6px 0 6px 20px;
line-height:16px

Answer 1

这是最简单的菜单工作方式的示例，如果您可以在 jsfiddle 和 js 上实现所有代码，我就能找到哪里出了问题，因为我看不到您在哪里设置子项的可见性 fiddle

.