Alright, I got it to work (was just playing around a bit).
Now... I have a problem ;)
The text in an anchor tag doesn't show up in the drop-down nav.
If someone could help me out, that'd be great!
CSS File
body
{
background-color: white;
background-image: url(images/background.png);
background-position: center center;
margin: 0 auto;
width: 900px;
border: 5px solid black;
}
div#banner
{
width: 100%;
height: 125px;
background-color: black;
}
div#nav
{
height: 30px;
width: 100%;
background-image: url(images/nav_bg.jpg);
}
div#main
{
background-color: white;
}
table
{
background-color: white;
}
ul#nav
{
display: block;
margin: 0 auto;
padding: 0px;
list-style-type: none;
width: 806px;
height: 30px;
}
ul#nav li
{
float: left;
position: relative;
border-left: 1px solid black;
}
ul#nav li a
{
display: block;
width: 160px;
height: 30px;
text-indent: -9999px;
}
ul#nav li:hover ul,ul#nav a:hover ul
{
visibility: visible;
}
ul#nav li a.home
{
background: url(images/navbar/navbar_01.gif) no-repeat 0 -30px;
}
ul#nav li a.home:hover
{
background-position: 0 0;
}
ul#nav li a.info
{
background: url(images/navbar/navbar_02.gif) no-repeat 0 -30px;
}
ul#nav li a.info:hover
{
background-position: 0 0;
}
ul#nav li a.events
{
background: url(images/navbar/navbar_03.gif) no-repeat 0 -30px;
}
ul#nav li a.events:hover
{
background-position: 0 0;
}
ul#nav li a.media
{
background: url(images/navbar/navbar_04.gif) no-repeat 0 -30px;
}
ul#nav li a.media:hover
{
background-position: 0 0;
}
ul#nav li a.forums
{
background: url(images/navbar/navbar_05.gif) no-repeat 0 -30px;
}
ul#nav li a.forums:hover
{
background-position: 0 0;
}
ul#nav li ul
{
visibility: hidden;
position: absolute;
height: 0;
left: -41px;
width: 160px;
list-style-type: none;
}
ul#nav li ul li
{
background-color: #8DB6D0;
font-family: verdana,arial,helvetica,sans-serif;
color: black;
text-align: center;
height: auto;
width: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
}
ul#nav li ul li a
{
color: white;
}
ul#nav li ul li:hover,ul#nav li ul a:hover
{
color: white;
background-color: black;
}
body,p,h1,h2,h3,table,td,th,ul,ol
{
font-family: verdana,arial,helvetica,sans-serif;
}
h1
{
color: white;
text-align: center;
margin: 0px;
text-decoration: underline;
font-size: 25px;
font-weight: bold;
}
h2,h3
{
text-indent: 20px;
text-decoration: underline;
font-size: 25px;
font-weight: bold;
color: #0F3E9A;
}
p
{
color: black;
font-size: 14px;
}
HTML File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>West Broward NHS - Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Banner -->
<div id="banner" class="header">
<h1>BANNER</h1>
</div>
<!-- Buttons -->
<div id="nav">
<ul id="nav">
<li>
<a class="home" href="#" title="Home">Home</a>
</li>
<li>
<a class="info" href="#" title="Info">Info <!-- About Us, Contact Us, Requirements --> </a>
<ul>
<li><a href="/about.html" title="About Us">About Us</a></li>
<li><a href="/contact.html" title="Contact Us">Contact Us<!--</a>--></li>
<li style="border-bottom: 1px solid black;"><a href="/requirements.html" title="Requirements">Requirements</a</li>
</ul>
</li>
<li>
<a class="events" href="#" title="Events">Events <!-- Project List, Social Events, Calendar --> </a>
<ul>
<li><a href="/projects.html" title="Project List">Project List</a></li>
<li><a href="/socialevents.html" title="Social Events">Social Events</a></li>
<li style="border-bottom: 1px solid black;"><a href="/calendar.html" title="Calendar">Calendar</a></li>
</ul>
</li>
<li>
<a class="media" href="#" title="media">Media <!-- Photos, Related Links --> </a>
<ul>
<li><a href="/photos.html" title="Photos">Photos</a></li>
<li style="border-bottom: 1px solid black;"><a href="/related.html" title="Related Links">Related Links</a></li>
</ul>
</li>
<li style="border-right: 1px solid black;">
<a class="forums" href="#" title="Forums">Forums</a>
</li>
</ul>
</div>
<!-- Main -->
<div id="main">
<h2>Home</h2>
<p>Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember...
</p>
</div>
</body>
<!-- Possible Colors
#8EB6D0 - Carolina Blue
#828283 - "Silver"
#4D81B1 - Darker Blue
#FFFFFF - White
#669999 - Teal
#BFD4E8 - Lighter Blue
#333333 - Black
-->
</html>