I am trying to position a nav bar to the left of an image.

The image is in the right place but I can't position the nav bar correctly. If I use;
position: absolute;
top: 0px,
left: 120 px

the nav bar appears to the left but just above the foot of the image border. You can see this on this link

The css code that I am using is;
Code:
#menu {
       float: left;
       margin-left: 20px; 
       margin-top: 0px;
       display: block;
       width: 100px;
       padding-right: 180px;
       
      }
#menu ul {
    padding: 4px;
    font-family: Arial,Verdana;
    font-size: 1.00em;
    list-style: list;
    background: #fffff0;
    
}
#menu ul li {
    display: block;
    float: left;
    position: relative;
}
#menu li ul {
    display: block;
    border-color: #D5D6FF;
    border-style: outset;
    z-index: 210;
}
#menu ul li a {
    display: block;
    margin-left: 5px;
    padding: 5px 10px 5px 10px;
    border-top: 1px solid #fff;
    text-decoration: none;
    white-space: nowrap;
    color: #1107C7;
    background: #fffff0;
    }
#menu ul li a:hover {
    background: #fffff0;
}
#menu li:hover ul {
    display: block;
    position: absolute;
}
#menu li:hover li {
    z-index: 200;
    float: none;
    font-size: 0.50em;
}
#menu li:hover a {
    background: #ff7f50;
}

#menu li:hover li a:hover {
    background: #fffff0;
}
How can I position the nav bar and image side by side?