Push text following image to top of div - css

Question

I have a div black bar, and a logo image that currently sits at the left as the first child element of this div. The logo image has a height larger than the black bar's fixed height of 42, so it juts out (this is a style choice)
I want to include a menu in the black bar, so I added a UL menu as the next child element.
However, it sits as the bottom of the div, outside the black bar area, because it sits inline with the logo.
I want to push the menu to the top, above the black area
I've tried every possible combination of floats, display: inline/inline-block, margin-top, padding-top, etc. but to no avail.
Anyone got a solution?
Thanks!!!
HTML
<div id="black-bar">
<img src="..."></img>
<ul>
<li>Programs & Projects</li>
<li>Recipes</li>
</ul>
</div>
CSS (This is only the lat of many combos I've tried)
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul{
line-height: 119px;
display: inline;
vertical-align: top;
}
#black-bar ul li{
display: inline;
}

Answer 1

JSfiddle
CSS
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline;
}
#black-bar ul li a {
vertical-align: top;
line-height: 40px;
color: white;
text-decoration: none;
}

Answer 2

You can take the line-height property from the black header.
Then you can display li as inline-block and apply padding as requited.
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
/*line-height: 119px;*/
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline-block;
padding:10px 15px 0 0;
}
see fiddle: http://jsfiddle.net/Jywd3/