center align a floated nav bar and dropdown from left to right - html

Question

i want to center align whats in the nav bar( so that the img is the center of the nav bar. I know that i have float: left; but if i dont, the(left thing, right thing) will drop down to the bottom edge of the img. So what i want is to keep float left, but be able to display: inline-block, or something equal. I also want the dropdown bar for the (left thing) to start at the img's left side, and then build out to the right side.
demo fiddle
HTML
<div id="nav">
<div id="container">
<ul>
<li>
Left thing
<ul>
<li><----- want it to go this way
</li>
<li>i want this to start under left thing
</li>
</ul>
</li>
<li>
<img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="height:70px" />
</li>
<li>
Right thing
<ul>
<li>This starts right
</li>
<li>And this is right
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
* {
padding: 0;
margin: 0;
}
#body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
}
#nav {
background-color: 72776A;
width: 100%;
position:fixed;
height:50px;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display:block;
}
#nav ul li {
float:left;
}
#container {
text-align:;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: ACD661;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position:absolute;
color: red;
border: 1px solid black;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}

Answer 1

replace
#container {
width: 270px;
margin: 0px auto;
}
Check this fiddle

Answer 2

Before talk about solution let's talk about your CSS, i removed repeats for margin:0, padding:0, highlighted forgetted selectors or mistyping. You need to precise a width to your container div and add margin-left and margin-right auto to achieve what you want :
/* {
padding: 0;
margin: 0;
} not the best solution, everybody don't need this rule */
/* instead here a group of selectors */
body,
#nav ul {
padding: 0;
margin: 0;
}
/*#*/body { /* you mean just body right ? */
font-family: Arial;
font-size: 17px;
}
#nav {
background-color: #72776A; /* you forgot # here */
width: 100%;
position:fixed;
height:50px; /*it's smaller than your image*/
}
#nav ul {
list-style-type: none;
position: relative;
/*display:block; don't need */
}
#nav li {
float:left;
}
#container {
/*text-align:; seems it's missing something here ? */
margin: 0 auto;
width: 300px;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
#nav ul li a:hover,
#nav ul li a:visited {/ { /* you mean a:visited ? */
color: #ACD661; /* here again # forgot */
display: block;
padding: 15px;
text-decoration: none;
}
#nav li:hover ul { /*ul don't need (i mean #nav ul li...) */
display: block;
}
#nav ul ul {
display: none;
position:absolute;
color: red;
border: 1px solid black;
}
#nav li li { /* shorter then ul ul li */
display: block;
}
#nav a li a:hover {
color: #699;
}
You can see code here