css aligning ul with image

I want to align facebook logo inline with the menu.

Here's the html code and you have attached the photo
.

<div id="menu">     <ul>
       <a href="#"><li>Home</li></a>
       <a href="#"><li>Web Design</li></a>
       <a href="#"><li>Web Hosting</li></a>
       <a href="#"><li>Web Marketing</li></a>
       <a href="#"><li>Oferte speciale</li></a>
       <a href="#"><li>Clienti</li></a>
       <a href="#"><li>Contact</li></a>
     </ul>
     <a href="#"><img src="images/facebook.png" alt="facebook" /></a>
   </div>

Code (markup):

#menu {   background:url(../images/bg_menu.png) no-repeat;
   }
   
#menu li {
   list-style-type:none;
   display:inline;
   padding:0px 5px 0px 5px;
}


#menu ul {
   margin:10px 0px 0px 10px;
   padding:18px 0px 20px 10px;
   font-size:16px; 
   font-family:Arial, Helvetica,sans-serif;
  }
  
#menu ul a {
   color:#ffffff;
   text-decoration:none;
   }
   
#menu ul a:hover{
   color:#ffffff;
   text-decoration:none;
   background-color:#4a4b50;
   }

Code (markup):

 

add this to your css
.facebook {float:right!important}

make changes in your html
<div id="menu">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Web Design</li></a>
<a href="#"><li>Web Hosting</li></a>
<a href="#"><li>Web Marketing</li></a>
<a href="#"><li>Oferte speciale</li></a>
<a href="#"><li>Clienti</li></a>
<a href="#"><li>Contact</li></a>
<a href="#" class="facebook"><li><img src="images/facebook.png" alt="facebook" /></li></a>
</ul>

</div>

 

Give the image float:left;

 

thanks Peon