Show a sub-menu with an images on hovering over list item
===

I have a sidebar with list items, and on one of these lists, I have to get a menu type functionality working.

    <ul id="nav">
                        <li><a href="#home-page" title="Home page">about</a></li>
                        <li><a href="#news-page" title="News">news</a></li>
                        <li>
                        <a href="#personal-page" title="Personal">personal</a>
                            <ul id="side-menu">
                                <li><img src="images/navbar-icons/menu-img.png" alt="sub menu image" /></li>
                                <li>profile</li>
                                <li>applications</li>
                                <li>settings</li>
                            </ul>
                        </li>
                    </ul>

On one of the sidebar `li` items, I want to get a dropdown menu with an image and three hyperlinks as shown in the figure.

Image: ![enter image description here][1]
 

**Css code:**

    ul#nav {list-style-type:none;margin:10px 0;padding:0;text-align:center;}
    ul#nav li {font-size:250%;line-height:25px;padding:7px 0;margin:0;}
    ul#nav li a:hover,ul#nav li a:active {color:#a61607;text-decoration:none;}
    ul#nav li img {display:none;}
    ul#nav a:hover + img{display:inline-block;}
    
    ul#nav li ul#side-menu {display:none; position:absolute;}
    ul#nav li:hover ul#side-menu {font-size:30%;list-style-type:none;line-height:2px;color:#a61607;text-decoration:none;display:block; position:absolute;}
    ul#nav li:hover ul#side-menu li {float:none;}
    ul#nav li:hover ul#side-menu li img {width:80px; height:60px; position: absolute; top: 20px;left: -90px;}

Trying the above, I get thhe three drop down items on hovering over the list item, and the image that is to be shown near these three items is not displayed, Any ideas on how to correct this or what I am doing that the image is not appearing?
  [1]: http://i.stack.imgur.com/S6DjC.png