When you hover on it a box opens.Now here comes the problem,i want the position of the box to be fixed at one place so whenever you hover on the menu the box remains at the same place.I hope you guys understood me and one more thing when somebody opens my webpage i want the first list item of the menu to be selected by default.

Here is my CSS:

```
#cssmenu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}
#cssmenu ul {
    display: block;
    position: absolute;
    width: 150px;
    top: 500px;
    left: 900px;
}
#cssmenu ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 150px;   
}
#cssmenu ul li a {
    display: block;
    position: relative;
    margin: 0;
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #d9d9d9;
    padding: 11px 20px;
    width: 150px;
    font-family:  Helvetica, Arial, sans-serif;
    color: #3dafea;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    font-size: 13px;
    font-weight: 300;
    background: #eaeaea;
}
#cssmenu ul li a:hover, #cssmenu ul li:hover a {
    color: #fff;
    background: #54cdf1;
    background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
    background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
    background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
    background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
    border-color: transparent;
}
#cssmenu ul .has-sub a::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 10px;
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-left: 4px solid #3dafea; 
}
#cssmenu ul .has-sub a::before {
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-left: 4px solid #fff;
}
#cssmenu ul li a:hover::after, #cssmenu ul li:hover a::after {
    border-left: 4px solid #fff;
}

#cssmenu ul li a:hover::before, #cssmenu ul li:hover a::before {
    border-left: 4px solid rgba(0, 0, 0, .25);
}
#cssmenu ul ul {
    position: absolute;
    left: 190px;
    top: -9999px;
    padding-left: 5px;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in;
    -moz-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    -ms-transition: opacity .3s ease-in;
}
#cssmenu ul li:hover ul {
    top: 0px;
    opacity: 1;
}
div.box {
    background: yellow;
    width: 200px;
    height: 200px;
    position: absolute;
}

```

And here is the HTML:

```
<div id='cssmenu'>
    <ul>
        <li class='has-sub'><a href='index.html'>Darksider II</a>
            <ul>
                <li class='has-sub'>
                    <div class="box"><img src='1.jpg' width='100' height='100'></div>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>FIFA 13</a>
            <ul>
                <li class='has-sub'><div class='box'><img src='1.jpg' width='100' height='100'>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Hitman Absolution</a>
            <ul>
                <li><div class='box'><img src='1.jpg' width='100' height='100'></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Hitman Blood money</a>
            <ul>
                <li><div class='box'><img src='1.jpg' width='100' height='100'></div>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Darksiders</a>
            <ul>
                <li><div class='box'><img src='1.jpg' width='100' height='100'></div></li>
            </ul>
        </li>
    </ul>
</div>

```

Any answer in any Language will be really appericiated and thanks in advance