ul being pushed out of div - html

Question

I'm currently experiencing an issue where my ul is being pushed out of my div. I have played with the margin, border, and padding on all the objects that might be affecting it with no success as of yet, here is the current code:
HTML:
<div id="nav">
<ul id=mainNav>
<li class=mainNav><a>Home</a></li>
<li class=mainNav><a>Products</a></li>
<li class=mainNav><a>Stores</a></li>
<li class=mainNav><a>About Us</a></li>
<li class=mainNav><a>Contact Us</a></li>
<li class=mainNav><a>Pet Pics</a></li>
</ul>
</div>
</div>
<div id="subBar">
<div id="subNav">
<ul id=subNavl>
<li class=subNav><a>Home</a></li>
<li class=subNav><a>Products</a></li>
<li class=subNav><a>Stores</a></li>
<li class=subNav><a>About Us</a></li>
<li class=subNav><a>Contact Us</a></li>
<li class=subNav><a>Pet Pics</a></li>
</ul>
</div>
</div>
CSS:
#header{
width:1000px;
background-color:#B443B7;
border-radius:200px;
height:50px;
margin:auto;
margin-top:0px;
margin-bottom:opx;
}
h1{
display:inline;
color:white;
margin-left:20px;
font-family: 'Indie Flower', cursive;
}
h1, a{
text-decoration:none;
color:#B443B7;
margin-top:auto;
margin-bottom:60px;
}
#subBar {
height:20px;
padding-top:10px;
width:875px;
margin-right:auto;
margin-left:auto;
background-color:#F4F459;
color:black;
border-radius: 0px 0px 200px 200px;
}
#nav {
margin:auto;
}
#subNav {
margin:auto;
}
#mainNav {
list-style-type:none;
}
.mainNav {
display:inline
}
.mainNav a {
display:inline-block;
height:35px;
padding-top:15px;
color:white;
width:100px;
text-align:center;
font-family:arial, sans-serif;
font-size:16px;
}
.mainNav a:hover{
background-color:#F4F459;
color:black;
}
#subNavl {
list-style-type:none;
}
.subNav {
display:inline
}
.subNav a {
display:inline-block;
height:30px;
margin-top:0px;
padding-top:0px;
color:black;
width:80px;
text-align:center;
font-family:arial, sans-serif;
font-size:16px;
}
And here's a screen shot of the results:
It would be much appreciated if someone could help me in resolving this problem.

Answer 1

http://jsbin.com/gorabonoqe/1/
I dropped your code in a JSBin and didn't look exactly like your screenshot but I think I was able to address the area you were trying to fix (the text dropping out of the yellow bar).
There's a lot of potential issues going on here. For one, all <a> elements have a bottom margin of 60px. I think that's what was throwing you off the most. I also changed the padding on #subBar and added a margin:0 on #subNavl.
Take a look at the jsbin link above and see if that's helpful.

Answer 2

Just to let you know .. when you work with ul > li > a
ul{
list-style: none;
list-style-type: none;
margin : 0;
padding: 0;
}
ul > li{
display : inline-block;
}
ul > li > a{
display: block;
height: 100%;
}
this way will make everything comes easy in your ul code

Answer 3

You set the height of that div, #subBar, to 20px and the browser is obeying that.