Expandable Nav Bar in CSS?

Question

I'm trying to make an expanding navbar, and I'm pretty far doing it, but I'm just a beginner and it currently looks like sh*t.

If you could help me for a bit? I'd like to do it with pure CSS, as I know nothing about 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>

It's too hard to write, here's the blueprints:

BLUEPRINTS

And here's the existing code:

CODE

Answer 1

I can't visualize the website cause I dont have Java x86 installed in this machine.

"So I'm trying to make a growing navbar, where the menu fades in and is dropdown menu in landscape"

Maybe another alternative to Javascript is using CSS3 Animation.

Read following links:

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 */

Here is a demo in JSFiddle (Press "Run").

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

I hope than It helps in someway.

EDIT:

also if you want to add a transition (mouse hover effect or show up something): 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