How to make the sub-menu beside its parent item?

Question

I have a menu, in this menu some items contains subset items. When create a subset to an item, the subset items wouldn't be beside the parent item.

For example:
In the below code, the item 2 has a subset, but this subset beside item 3 not as expected beside item 2.

I want
When I create a subset to any parent item, the subset must be beside the item that belong to it.

HTML

<div class="box">
    <ul>
        <li> <a href="#"> Item 1 </a> 
        </li>
        <li> <a href="#"> Item 2 </a> 
            <ul>
                <li> <a href="#"> Subset Item 2</a> </li>
                <li> <a href="#"> Subset Item 2</a> </li>
            </ul>
        </li>
        <li> <a href="#"> Item 3 </a> 
        </li>
        <li> <a href="#"> Item 4 </a> 
        </li>
        <li> <a href="#"> Item 5 </a> 
        </li>
    </ul>
</div>

CSS

.box {
    width:130px;
}
.box ul {
    padding:0;
    margin:0;
    list-style-type:none;
    position:relative;
}
.box ul li {
    margin-bottom:1px;
}
.box ul li a {
    display:block;
    padding:5px;
    background-color:#ff0099;
    color:#fff;
    font:bold 20px arial;
    text-decoration:none;
}
.box ul li a:hover {
    background-color:#b2086e;
    color:#fff;
}
.box ul li ul {
    position:absolute;
    left:131px;
}
.box ul li ul li a {
    width: 135px;
}

You can also see the online JSFiddle.

Answer 1

Just make the <li> relatively positioned, rather than the <ul>. Then you can set the submenu to be top: 0 and also left: 100% rather than setting a pixel value.

.box ul li {
  margin-bottom:1px;
  position: relative;
}

.box ul li ul {
  position:absolute;
  left:100%;
  top: 0;
  margin-left: 1px; /* Styling */
}

Demo

Answer 2

http://jsfiddle.net/gcnmn/

.box ul li ul {
    position:absolute;
    top: 36px;       /* added this line */
    left:131px;
}