CSS Menu

[mpetaia]

1) CODE TITLE: Colorful Pure CSS Menu

2) AUTHOR NAME/NOTES: Manu Petaia

3) DESCRIPTION: One of my first CSS Menus Scripts. Nothing spectacular, but just something I thougth was cool. I have a multi level (currently only 2 levels deep) version. Any thoughts? critiques?

Very simple and clean.

4) URL TO CODE:
or, ATTACHED BELOW (see #3 in guidelines below):

Heres the code for the list/menu enclosed in a div with the Id of menu:

<div id="menu">
<ul>
<li><div class=link><center>
<div class=linktop style=background-color:#FFCC66>

</div>
<div class=linkbottom>
<center>
<a href="javascript:ajaxpagefetcher.load('content', 'biblebowl/home.htm', false)">Home</a>
</center>
</div>
</div>
<li><div class=link><center>
<div class=linktop style=background-color:#5CCDC9>

</div>
<div class=linkbottom>
<center>
<a href="javascript:ajaxpagefetcher.load('content', 'biblebowl/study.htm', false)">For Study</a>
</center>
</div>
</div>
<li><div class=link><center>
<div class=linktop style=background-color:#4573D5>

</div>
<div class=linkbottom>
<center>
<a href="javascript:ajaxpagefetcher.load('content', 'biblebowl/register.htm', false)">Register</a>
</center>
</div>
</div>
<li><div class=link><center>
<div class=linktop style=background-color:#BF6F30>

</div>
<div class=linkbottom>
<center>
<a href="javascript:ajaxpagefetcher.load('content', 'biblebowl/involved.htm', false)">Get Involved</a>
</center>
</div>
</div>
<li><div class=link><center>
<div class=linktop style=background-color:#FD0006>

</div>
<div class=linkbottom>
<center>
<a href="javascript:ajaxpagefetcher.load('content', 'biblebowl/past.htm', false)">Past Biblebowls</a>
</center>
</div>
</div>
</ul>
</div>



And here is the corresponding CSS.
#menu
{
position:absolute;
top:115px;
left:300px;
height:20px;
}
#menu ul
{
list-style-type: none;
background-color:#FFFFFF;
height: 20px;
width: 950px;
margin: auto;
}

#menu ul li
{
float:left;
}
.link
{
padding-left:5px;
padding-right:5px
}
.linktop
{
width:113px;
height:4px;
border:1px solid black;
}
.linkbottom
{
font-weight:900;
width:113px;
background-color:#FFF;
font-size:15px
}
.linkbottom a
{
display:block;
}
.linkbottom:hover
{
border:1px solid black;
background-color:#F0F0F0;
}

a
{
text-decoration:none;
color:black;
}



It may be too simple for inclusion on the DD site, but I thought it was pretty cool. Again, its my first CSS menu that I built by myself from scratch, so please bear with me as I continue to work it. Constructive Criticism is certainly welcome.

Thanks.

[mpetaia]

By the way, sorry about the information I had put in the links. Its just an ajax script I had been using with the menu on the site. The script btw is courtesy of javascript kit, the name of teh script being ajaxpagefetcher.

So disregard the script. XD

If you want the entire website so you can see it in context, pm me and I can send the site. Its small, being only a few MB in size. Just in case you wanna see it in use on a site. =].

Tried using it twice on another development site I was working on and ran into some problems with ID-ing the divs. Had to rename the div entitled "menu" to "menu2" to use it twice. Otherwise, everything worked out fine.