Joomla submenu

I am not understanding the problem I am having with this. I simply want to create a second menu below the main menu. I would like it to be a nested menu based on the primary menu item selected, but i can work on that after I get a basic menu to work there.

I do not understand what the problem i am having is it should be something simple and stupid that I am missing? you would figure that whatever the div container i have the jdoc include in should take the properties, but it doesn't work. However if I change the div id for the second menu to s5_navv it takes on the same properties as the main menu like it should. So the problem must be in my css code or something
The div layout is as follows

<div id="s5_menu">
	<div id="s5_navv">
		<?php mosShowListMenu($menu_name);	?>
		<?php if ($s5_menu  == "1") { ?>
			<script type="text/javascript" src="<?php echo $LiveSiteUrl;?>/templates/city_portal/js/s5_no_moo_menu.js"></script>																		
		<?php } ?>
		<?php if ($s5_menu  == "3") { ?>
			<script type="text/javascript" src="<?php echo $LiveSiteUrl;?>/templates/city_portal/js/s5_fading_no_moo_menu.js"></script>																		
		<?php } ?>	
	</div>
</div>
        <div style="clear:both;height:15px;"></div>
       <div id="secondmenu">
       <jdoc:include type="modules" name="secondmenu" style="xhtml" id="secondmenu" />
       </div>		

HTML:

I added the following css both to the template.css and the index.php and it does nothing I don't understand it?

.secondmenu {
	display:inline;
	background-color:#600; height:20px; width:100%;
}
#secondmenu {
	display:inline;
	background-color:#600; height:20px; width:100%;
}
#secondmenu a.mainlevel {

	background:none;}



#secondmenu h3 {

	padding-bottom:7px;

	font-size:13px; }



#secondmenu ul {

	color:#FFFFFF;

	display:inline;

	font-style:normal;

	font-weight:normal;

	float:right;

	line-height:10px;

	list-style-image:none;

	list-style-position:outside;

	list-style-type:none;

	}

#secondmenu ul li {

	color:#FFFFFF;

	display:block;

	height:14px;

	float:left;

	line-height:14px;

	margin-right:0px;

	font-size:11px;

	overflow:hidden;

	padding-bottom:6px;

	padding-left:1px;

	}

#secondmenu li a {

	color:#FFFFFF;

	background:none;

	display:block;

	padding:0px 9px;

	border-right:1px solid #CCCCCC;

	text-decoration:none;

	}



#secondmenu li a.mainlevel {

	background:none;}

	

#secondmenu ul li a:hover {

	text-decoration:underline;}

HTML:

PLEASE TAKE THE TIME TO HELP ME UNDERSTAND THIS ?
it has to be something simple i am missing

 

ok i got the background working i didn't realize i was naming the container by id instead of class. I still can't get the menu to change though.