Hoe stel je in dat een horizontaal navigatie menu langzaam verschijnt en dat ie een beetje doorzichtig is?

Dag jorenman, nog steeds goed bezig zie ik? :)

Wat jij wilt kan op verschillende manieren bereikt worden. Omdat ik een voorstander ben van pure html en css (zonder javascript en jquery als het ff kan) zal ik je een antwoord geven met alleen html en css.

Het transparant weergeven van een element op een website zoals finforce dat op hun site gedaan heeft kan op verschillende manieren.
- Een transparante "background-image:" definiëren in je .css file. Dat moet dan automatisch een .png bestand zijn zoals je misschien weet.
- Een transparante "background-color:" definiëren in je .css file door middel van een "rgba();" waarde. (De laatste waarde in rgba, de "a" bepaalt de mate van transparantie)
- Een opacity in je .css file definiëren die kleiner is dan 1.

Die laatste mogelijkheid heeft finforce gebruikt voor hun submenu's.
Nadeel hiervan is dat wanneer je een element een bepaalde opacity geeft alle daaronderliggende elementen (children) ook meteen die opacity krijgen, dus ook de tekst bijvoorbeeld, en dat is meestal niet goed voor de leesbaarheid. Ik weet niet of finforce dit probleem opgelost heeft en hoe ze dat dan gedaan hebben maar ik zou je zelf adviseren om een rgba(); waarde te gebruiken.

Wat betreft je tweede vraag over het langzaam laten verschijnen van een element van je website:

Dat kun je doen door een webkit transition te gebruiken in combinatie met de :hover pseudo class en de .css definities "display: none" en "display: block". Webkit transitions zijn onderdeel van css3.

Het is vrij ingewikkeld en ik denk dat het te ver gaat om je hier alles uit te leggen.
Maar in het kort: je hebt als het goed is je submenu standaard op "display: none" gezet of "visibillity: hidden" (het voornaamste verschil is dat het ene wel ruimte in neemt als het onzichtbaar is en het andere niet, zie bron.)
Vervolgens heb je voor dat zelfde submenu een :hover state gedefinieert met daarin bijvoorbeeld: "display: block" of "visibility: visible"
De webkit-transition maakt een transitie van onzichtbaar naar zichtbaar. Hier een klein voorbeeld:

div {
transition: display 0.5s ease;
display: none;
}
div:hover {
display: block;
}

Je kunt verschillende parameters opgeven voor verschillende effecten.
Let er op dat dit effect niet in alle browsers werkt en dat je het dus alleen als extraatje gebruikt (het mag de functionaliteit van je site niet aantasten wanneer het niet werkt)
Gebruik altijd vendor prefixes voor een beetje cross-browser compatibiliteit.
Succes!