mose over menu

[hunter13605]

i am working on my fist website using css. i am doing ok so far but i am having some trouble on the navigation bars. There are two horizontal bars. The bottom should be blank until i put my mouse over something on the top. then i want the bottom bar to show the sub pages of the top button.

I am using images for the buttons. if somebody has done something like this before and is willing to help, please contact me by either replying or send me and email (brian at nnysitedesigns dot net)

 

[hunter13605]

also, this is the code that i would like to use for the image buttons

/* =Main Navigation
----------------------------------------------- */
#nav-a { left: 15px; list-style-type: none; position: absolute; top: 15px; }

#nav-a li { float: left; margin: 0 1px 0 0; width: 104px; }

#nav-a li a { display: block; height: 20px; overflow: hidden; text-indent: -9999px; width: 104px; }

#nav-a-home a { background: transparent url(../i/GM11_nav_home.jpg) no-repeat 0 0; }

#nav-a-about a { background: transparent url(../i/GM11_nav_about.jpg) no-repeat 0 0; }

#nav-a-tips a { background: transparent url(../i/GM11_nav_tips.jpg) no-repeat 0 0; }


#nav-a-home a:hover, #nav-a-home a:focus, #nav-a-home a:active,
#nav-a-about a:hover, #nav-a-about a:focus, #nav-a-about a:active, 
#nav-a-tips a:hover, #nav-a-tips a:focus, #nav-a-tips a:active { background-position: 0 -20px; }

and this is the code that i am forced to use to get it to align properly

/* =Main Navigation
----------------------------------------------- */
ul#nav-a li { background: none; display: inline; padding: 0;}

#nav-a li a { border: 1px solid #DDDDDD; color: #999999; font-size: .9em; padding: 3px 4px 3px 20px; text-decoration: none; }

#nav-a li a:hover, #nav-a li a:focus, #nav-a li a:active { color: #666666; /*text color on mouse over*/ }

#totop a { background: url(../i/GM11_totop.gif) no-repeat 4px 50%; }

#tonavigation a { background: url(../i/GM11_tonavigation.gif) no-repeat 4px 50%; }

#accessibility a { background: url(../i/GM11_accessibility.gif) no-repeat 4px 50%; }

#colophon a { background: url(../i/GM11_colophon.gif) no-repeat 4px 50%; }


#nav-a-home a:hover, #nav-a-home a:focus, #nav-a-home a:active,
#nav-a-about a:hover, #nav-a-about a:focus, #nav-a-about a:active, 
#nav-a-tips a:hover, #nav-a-tips a:focus, #nav-a-tips a:active { background-position: 0 -20px; }

is there anyway that i can use the second code but make it work with background image as a button?