水平下拉导航纯css

时间:2013-05-30 10:43:07

标签: css navigation hover onhover navigation-style

我正在使用水平下拉导航的网站上工作,但它无法正常工作。

我不能让第二级导航隐藏起来,直到第一级导航。我知道我需要直系后代。此外当当前页面出现时导航需要显示但我无法解决它!

目前我在那里的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

}

1 个答案:

答案 0 :(得分:0)

以下是最简单的菜单工作的示例,如果您可以在jsfiddle上实现所有代码与js一起我可以找到出错的地方,bcs我看不到你在哪里设置可见性 fiddle

.