Can't apply distinct styles to nav and ul - css

Question

I'm trying to create two navigation menus in an HTML document. I am using nav and ul tags. But my CSS is not allowing me to create different appearance for both. One nav will be on the top of the page, the second is on the side. The appearance is taking on the menu within the side.
Here is the relevant section of the HTML:
<div id="navbar">
<nav id="navbar_text">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Services</li>
</ul>
</nav>
</div> <!--END navbar-->
<div id="main-wrap" class="group">
<aside>
<nav id="sidebar">
<ul>
<li>Contact Us</li>
<li>Awards & Articles</li>
<li>Testimonials</li>
<li>Photo Gallery</li>
</ul>
</nav>
Here is my CSS:
#sidebar a:link{
color: #663333;
}
#sidebar a:hover{
color: #dccfbd;
}
#navbar_text a:link{
color: #bca380;
}
#navbar_text a:hover{
color: #dccfbd;
}
#navbar_text{
width: 100%;
float: left;
}
#navbar_text li {
float: left;
list-style: none;
padding: 0;
background: #663333;
margin: 0;
color:#bca380;
}
nav ul li a {
display: block;
padding: 10px 10px 10px 15px;
background: #cab69a;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
margin-top: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: bold;
color: #663333;
text-decoration: none;
-webkit-box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
}
nav ul {
list-style:none;
}

Answer 1

If you want the #navbar_text and the #sidebar navigation menus to be styled differently, you must specify in the CSS specifically how you want each to look.
Therefore, you could use something like...
#navbar_text ul {}
#navbar_text ul li {}
#navbar_text ul li a {}
#navbar_text ul li a:hover {}
#sidebar ul {}
#sidebar ul li {}
#sidebar ul li a {}
#sidebar ul li a:hover {}
Basically, don't be too general by saying...
nav ul li a {}
because that will style both of the menus since they both use those same attributes.
If you are looking for help on the positioning of these two menus as opposed to the appearance, you will have to provide some more information about where they are located currently and where you'd like them to be. But the examples I stated above might help you with position, you just have to be specific in saying that you want the #sidebar menu to be positioned a certain way and the #navbar_text to be positioned a different way.
For example...
#navbar_text ul {
*add position styles here*
}
#sidebar ul {
*add position styles here*
}

Answer 2

try this Demo:
http://jsfiddle.net/pSkua/6/
CSS
body {
margin: 0;
padding: 0;
}
aside {
position: absolute;
right: 0;
}
#slidebar ul {
margin: 0;
padding: 0;
}
#slidebar li {
display: block;
}
#slidebar a {
display: inline-block;
}
#sidebar a:link {
color: #663333;
}
#sidebar a:hover {
color: #dccfbd;
}
#navbar_text a:link {
color: #bca380;
}
#navbar_text a:hover {
color: #dccfbd;
}
#navbar_text {
width: 100%;
margin: 0;
padding: 0;
}
#navbar_text li {
float: left;
list-style: none;
padding: 0;
background: #663333;
margin: 0;
color: #bca380;
}
nav ul li a {
display: block;
padding: 10px 10px 10px 15px;
background: #cab69a;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
margin-top: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: bold;
color: #663333;
text-decoration: none;
-webkit-box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.clr_both{
clear:both;
}