在CSS中可扩展的导航栏？

Question

我想做一个扩展的导航栏，而且我很努力，但我只是一个初学者，它现在看起来像sh * t。

如果你能帮我一下吗？ 我想用纯CSS来做，因为我对JS一无所知。

<div id="blackbox" /> 
<div id="blacktxt">Navigation</div> 
<nav> 
    <ul> 
     <li><a href="About">About</a> 

      <ul> 
       <li><a href="abfin">About Finland</a> 
       </li> 
       <li><a href="#">About Us</a> 
       </li> 
     </li> 
     </ul> 
     </div> 

这太难写，这里的蓝图：

BLUEPRINTS

和这里的现有代码：

CODE

Answer 1

我不能想像网站导致我没有这台机器安装了Java x86。

“所以我试图让越来越多的导航栏，在菜单中消失，是景观下拉菜单”

也许另一个替代JavaScript是使用CSS3动画。

阅读以下链接：

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

http://www.w3schools.com/cssref/css3_pr_animation.asp

Stopping a CSS3 Animation on last frame

animation-fill-mode: forwards; 
-webkit-animation-fill-mode: forwards; /* Safari and Chrome */ 

@keyframes mymove 
{ 
from {top:0px;} 
to {top:200px;} 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
from {top:0px;} 
to {top:200px;} 
} 

animation:mymove 5s infinite; 
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */ 

这里是的jsfiddle（按 “运行”）的演示。

http://jsfiddle.net/Z3SSm/5/

我希望比它有助于以某种方式。

编辑：

此外，如果你想添加一个过渡（鼠标悬停效果还是显示出来的东西）： http://www.w3schools.com/cssref/css3_pr_transition.asp

http://www.w3.org/TR/css3-selectors/#selectors

http://www.w3.org/TR/css3-selectors/#general-sibling-combinators