Issue With Dropdown Navigation In CSS

Before I get into any of the details of my problem, I want to start this post off by saying that I am certainly NOT an expert at CSS. Although I have had off-and-on experience working with the code through random little projects, this is still the first major site that I've ever worked on. I'm still learning about good coding practices, web standards, and the such, so please be easy on me if what I've written so far is too messy. :o

Alright, my problem has to do with the new navigation that I've been trying to implement into a site for a client that I've acquired through my school's computer teacher. It's a small site for the fundraising club for our soccer team that involves nothing too complex, just a few tables for schedules, etc. For about a month, I've been in contact with the club and have already shown them my entire design and my ideas for each section, including a navigation layout derived from their past site. However, since the new season began this past week, they've been hammering me with extra statistics for each of the four teams at our school (boys varsity, boys junior varsity, etc.). I'm having absolutely no trouble getting all of the stuff written up, my only problem is with how I need to organize this entire mess.

What I've decided to do is to take my old navigation bar, shown here...

http://img.photobucket.com/albums/v416/Homestaw/css_original.png

and change several of the sections to have dropdown menus (the modified buttons have the arrows beneath them). This means that instead of having Boys Schedules as I did before before, I now have Boys Team which will have a dropdown containing Schedules and Rosters.

http://img.photobucket.com/albums/v416/Homestaw/css_new.png

As with most sites, I used unordered lists to create my navigation bar. Here is the code for my original site before the modifications:

<!--Navigation-->
<div id="nav">
<ul>
<li class="current"><a href="index.htm"><span>Home</span></a></li>
<li><a href="boy_schedule.htm"><span>Boy's Schedules</span></a></li>
<li><a href="girl_schedule.htm"><span>Girl's Schedules</span></a></li>
<li><a href="activities.htm"><span>Activities</span></a></li>
<li><a href="summaries.htm"><span>Game Summaries</span></a></li>
<li><a href="spirit.htm"><span>Spirit Store </span></a></li>
<li><a href="stats.htm"><span>Statistics</span></a></li>
<li><a href="coaches.htm"><span>Coaches &amp; Officers</span></a></li>
</ul>
</div>
<!--End Navigation-->


Here is the CSS for my old design:
#nav{
background: url(../images/nav_fill.png) repeat-x;
height:31px;
width:830px;
border:1px solid;
border-color:#000000;
border-top:none;
border-bottom:none;
}

#nav ul li{
display:inline;
float: left;
margin: 0 1px 0 0;
}

#nav ul{
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}

#nav ul a {
background: url(../images/tab.png);
color: #000000;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}

#nav ul a:hover {
background: url(../images/tab.png);
color: #ffffff;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}

#nav ul span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}

#nav ul li.current a{
color: #ffffff;
}


Now, here is my new version to help accomodate the dropdown:
<!--Navigation-->
<ul id="nav">
<li class="current"><a href="index.htm"><span>Home</span></a></li>
<li><a href="boy_schedule.htm"><span>Boys Team</span></a>
<ul>
<li><a href="boy_schedule.htm">Schedules</a></li>
<li><a href="boy_rosters.htm">Rosters</a></li>
</ul>
</li>
<li><a href="girl_schedule.htm"><span>Girls Team</span></a>
<ul>
<li><a href="girl_schedule.htm">Schedules</a></li>
<li><a href="girl_rosters.htm">Rosters</a></li>
</ul>
</li>
<li><a href="activities.htm"><span>Activities</span></a></li>
<li><a href="summaries.htm"><span>Game Summaries</span></a></li>
<li><a href="spirit.htm"><span>Spirit Store </span></a></li>
<li><a href="stats.htm"><span>Statistics</span></a>
<ul>
<li><a href="boy_v_stats.htm">Boys Varsity</a></li>
<li><a href="boy_jv_stats.htm">Boys JV</a></li>
<li><a href="girl_v_stats.htm">Girls Varsity</a></li>
<li><a href="girl_jv_stats.htm">Girls JV</a></li>
</ul>
</li>
<li><a href="coaches.htm"><span>Coaches &amp; Officers</span></a>
<ul>
<li><a href="coaches.htm">Contact Info</a></li>
<li><a href="coaches_bios.htm">Bios</a></li>
</ul>
</li>
</ul>
<!--End Navigation-->


And here is the corresponding CSS:
#nav{
background: url(../images/nav_fill.png) repeat-x;
height:31px;
width:830px;
border:1px solid;
border-color:#000000;
border-top:none;
border-bottom:none;
}

ul {
padding: 0;
margin: 0;
list-style: none;
height: 2em;
}

ul span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}

ul li a {
background: url(../images/tab.png);
color: #000000;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}

ul li ul li a {
background: none;
padding: 5px 10px 5px 10px;
display: block;
poistion: relative;
}

li {
float: left;
position: relative;
display:inline;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

li > ul {
top: auto;
left: auto;
}

li:hover ul { display: block; }


Now, I can get the mouseover effect to work. However, whenever I do, it will either show up inline or vertical with varying spaces in between. Also, I have not been able to figure out how I could get the dropdown area to have a one px black border and to add a background image.

If I'm not explaining this clearly enough or if you'd like to see the entire site, let me know and I can either post a link to what I have so far or go into more detail.

Thanks in advance! :)

A url is always the best.:D

Frank

My pleasure :)

Current Navigation (http://www.mosleysoccerboosterclub.com/)
New Navigation (http://www.mosleysoccerboosterclub.com/index_new.htm)

Hi Raeget,
I have also had troubles in the past trying to create a horizontal navigation that also supports a vertical drop down menu.

So I created a very detailed tutorial on each step of creating a PURE CSS horizontal and vertical pop out navigation menu.

Check out my tutorial and I am sure you will find where it is you might need to alter the code slightly to make it preform the way you need.

PURE CSS Horizontal Navigation Menu with sub menu. (http://www.devinrolsen.com/tutorials/css/horz_menu/index.html)

Hope this help m8.