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