How to get a submenu in Css & HTML like my picture.. I have tried and googled for my requirement but not got any solution 
my requirement is when i mouseouver any menu, it's submenu should be displayed only on the side of the page like my above picture
I may be not googled with any specific keywords that you people may know

Did any one got my idea...stuck with this for last couple of days
![enter image description here](https://i.stack.imgur.com/IhUBd.jpg)

Some of the Code i have tried 

HTML 

```
div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<ul><li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>

#menu {
    width: 550px;
    height: 35px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
    border-radius: 8px;
}

#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

#menu li { 
display: inline; 
padding: 20px; 
}

#menu a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}

#menu a:hover {
    color: #F90;
    background-color: #FFF;
}

```