Two Navigation Bars

[jaycastr]

Hey guys,

I am trying to write a page that has a main horizontal navigation bar and a vertical sub navigation bar. My problem is that the selector(a, il, ul ...) in CSS is effecting both bars. How do i separate the two. Here is my HMTL section for the Main nav bar

<div id="main_nav_bar" class="center">
            <ul>
                <li><a href="foa_metrics_home.jsp">Home</a></li>
                <li><a href="foa_metrics_create.jsp">Create</a></li>
                <li><a href="foa_metrics_view.jsp">Review</a></li>
                <li><a href="foa_metrics_update.jsp">Update</a></li>
                <li><a href="foa_metrics_delete.jsp">Delete</a></li>
                <li><a href="foa_metrics_insert.jsp">Insert</a></li>
                <li><a href="foa_metrics_contact.jsp">Contact</a></li>
            </ul>
	</div>

And here is my css code for that nav bar

#main_nav_bar{
	width:1000px;
	height:32px;
	border:5px black solid;
	background-color:white;}
ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
	overflow:hidden;}
li{
	float:left;}

a:link,a:visited{
	display:block;
	width:130.8px;
	font-weight:bold;
	color:#000000;
	background-color:#5442as;
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;}
	
a:hover,a:active
	{
	background-color:#3e71f0;
	}
.center{
	margin-left:auto;
	margin-right:auto;
	width:50%;}

now here is my code for my side vertical bar

<div id="side_nav">
            <ul id="side_nav_ul">
                <li id="side_nav_li"><a id="side_nav_a">Intro</a></li>
                <li id="side_nav_li"><a id="side_nav_a">Roles</a></li>
                <li id="side_nav_li"><a id="side_nav_a">Responsibilities </a></li>
                <li id="side_nav_li"><a id="side_nav_a">Roles</a></li>
                <li id="side_nav_li"><a id="side_nav_a">Resources</a></li>
            </ul>
        </div>

As you can see i was thinking of adding a id to each element of the vertical bar but that is not working
I would greatly appreciate any help?

[Jaseva]

You can add your ID to any css selector that you want specifically for that list. For example, line #6 of your first css would be:

#main_nav_bar ul{ ...

This means that the styles in this block will only affect a ul found inside the #main_nav_bar.

Note:
The IDs you tried to use in the second list don't work because an ID can only be used once per page. A class on each item would have worked.

[jaycastr]

Thanks for the help sara!

This is what i did

<div id="main_nav_bar" class="center">
       <ul class="main">
         <li class="main"><a class="main" href="foa_metrics_home.jsp">Home</a></li>
         <li class="main"><a class="main" href="foa_metrics_create.jsp">Create</a></li>
         <li class="main"><a class="main" href="foa_metrics_view.jsp">Review</a></li>
         <li class="main"><a class="main" href="foa_metrics_update.jsp">Update</a></li>
         <li class="main"><a class="main" href="foa_metrics_delete.jsp">Delete</a></li>
         <li class="main"><a class="main" href="foa_metrics_insert.jsp">Insert</a></li>
         <li class="main"><a class="main" href="foa_metrics_contact.jsp">Contact</a></li>
       </ul>
</div>
        
        <div id="fm_home_sub_nav">
            <ul class="home">
                <li class="home"><a class="home">Intro</a></li>
                <li class="home"><a class="home">Roles</a></li>
                <li class="home"><a class="home">Responsibilities</a></li>
                <li class="home"><a class="home">Relationships</a></li>
                <li class="home"><a class="home">Resources</a></li>
            </ul>
        </div>

the css:

ul.main{
	list-style-type:none;
	margin:0px;
	padding:0px;
	overflow:hidden;}
li.main{
	float:left;}
a.main:link,a.main:visited{
	display:block;
	width:130.8px;
	font-weight:bold;
	color:#000000;
	background-color:#5442as;
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;}
	
a.main:hover,a.main:active
	{
	background-color:#3e71f0;
	}




ul.home{
    list-style-type:none;
    margin:0px;
    padding:0px;
    overflow:hidden;
}
li.home{
    float:left;
}
a.home{
	display:block;
	width:100px;
	font-weight:bold;
	color:#000000;
	background-color:#5442as;
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;
        font-size: 11px;}
	
a.home:hover,a.home:active
	{
	color:#3e71f0;
	}