This is a bit complicated...I'm only starting in html/css php/mysql
Here is my html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<META NAME="description" CONTENT="The teen tech podcast is a tech podcast talking about everything tech related! Also there are reviews, news and a forum! If you get bored your stupid!" />
<META NAME="keywords" CONTENT="teen, tutorials, web, reviews, news, forum, fun, technology, podcast, tech, teentechpodcast, twitter, etc..." />
<META NAME="AUTHOR" CONTENT="someone">
<title>TeenTechGuy.com, One teen, One guy and a massive industry to cover! **Pre Pre alpha**</title>
<link rel="stylesheet" href="style3.css" type="text/css" media="all">
<link rel="shortcut icon" type="image/png" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" media="all">
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/accordeon.js"></script>
</head>
<body>
<!-- all the page -->
<div id="wrapper">
<!-- The header -->
<div id="header">
<a href="index2.htm" ><img src="images/logo3.png" width="247" height="104" alt="Logo" a href="index2.htm" class="no_cadre"></a>
<!-- The links -->
<div class="menu">
<ul>
<li><a id="current" href="index.html" target="_self" >Home</a>
</li>
<li><a href="news,html" target="_self" >News</a>
<ul>
<li><a href="vidgamenews.html" target="_self">Video Game News</a></li>
<li><a href="" target="_self">Tech News</a></li>
</ul>
</li>
<li><a href="reviews.html" target="_self" >Reviews</a>
<ul>
<li><a href="vidreviews.html" target="_self">Video Game Reviews</a></li>
<li><a href="hardwarereviews.html" target="_self">Hardware Reviews</a></li>
<li><a href="softreviews.html" target="_self">Software Reviews</a></li>
<li><a href="otherreviews.html" target="_self">Others...</a></li>
</ul>
</li>
<li><a href="teentechpodcast.html" target="_self" >Podcast</a>
<ul>
<li><a href="teentechguy.html" target="_self">Teen Tech Guy</a></li>
<li><a href="fav.html" target="_self">My Favorites</a></li>
</ul>
</li>
<li><a href="tutorials.html" target="_self" >Tutorials</a>
<ul>
<li><a href="gimptuts.html" target="_self">Gimp Tutorials</a></li>
<li><a href="csstuts.html" target="_self">CSS Tutorials</a></li>
<li><a href="htmltuts.html" target="_self">HTML tutorials</a></li>
<li><a href="windowstuts.html" target="_self">Windows Tutorials</a></li>
<li><a href="vidtuts.html" target="_self">Video Tutorials</a></li>
<li><a href="othertuts.html" target="_self">Others...</a></li>
</ul>
</li>
<li><a href="http://techforums.freeforums.org/index.php" target="_self" >Forum</a>
</li>
<li><a href="about.html" target="_self" >About</a>
<ul>
<li><a href="aboutme.html" target="_self">About Me</a></li>
<li><a href="aboutsite.html" target="_self">About the site</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sous"><img src="images/sous.png" style="padding:0px" /></div>
<!-- End of header -->
<!--
<div id="menulinks">
</div>
-->
<!--
<div id="page_top">
</div>
-->
<!-- All the page content is here **The container** -->
<div id="page_container">
<!-- Top of the conatainer (rounded corners) -->
<h2 id="page_top">Topic of the day:</h2>
<!-- Where the text/images etc.. goes -->
<div id="contentarea">
<p><a href="chamilionaire.mp3">Chamilionaire</a></p>
<script language="javascript">
<!--
var part1 = "raphael_dore";
var part2 = "hotmail.com?subject=Hello Raph";
var part3 = "Contact me";
document.write('<a href="mai' + 'lto:' + part1 + '@' + part2 + '">');
document.write(part3 + '</a>');
// -->
</script>
</div>
<!-- Sidebar/menu to naviguate in the site -->
<div id="sidebar">
<div class="bloc">
<h3>Navigation</h3>
<h2 class="ascenseur">Tests</h2>
<div>
<ul>
<li>Mp3's</li>
<li>TV's</li>
<li>Games</li>
<li>Software</li>
<li>Hardware</li>
</ul>
</div>
<h2 class="ascenseur">Categories</h2>
<div>
<ul>
<li>Games</li>
<li>Tech</li>
<li>Web coding/web design</li>
</ul>
</div>
<h2 class="ascenseur">Reviews</h2>
<div>
<ul>
<li>Mp3's</li>
<li>TV's</li>
<li>Games</li>
<li>Software</li>
<li>Hardware</li>
</ul>
</div>
</div>
<div class="Finbloc"></div>
</div>
<!-- The footer -->
<div id="footer">
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS Valide !">
</a>
<a href="http://www.twitter.com/videogameteen" ><img src="images/twitter.png" width="65px" height="18px" title="Join the Video Game Teen on twitter!" alt="www.twitter.com/videogameteen" class="no_cadre"></a>
Coded and designed by: Teen tech guy, all rigths reserved</p>
</div>
<!-- End of footer -->
</div> <!-- end page_container -->
</div> <!-- end wrapper -->
</body>
</html>
and here is the css code for the menu:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:18px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#ffffff;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#gggggg;
text-decoration:none;
}
.menu li ul{
background:#e10606;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#3386b6;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
backgroud:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
.menu
{
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
Thanks for helping!
ps: thanks anyway Andyram2k, this will certainly be in use in the future! :)