Html-css-how To Make Opeanable Vertical Menu

I want to make a menu like this image : When I hover on each item on right menu , it opens a box beside it.As you can see, when mouse hover on each menu , it opens a box beside th

Solution 1:

If i understand you correct try with this:

HTML

<ul>
    <li>
        <a href="#">Link</a>
        <div>something</div>
    </li>
    <li>
        <a href="#">Link</a>
        <div>something</div>
    </li>
</ul>

CSS

ul {
    float: right;
}

ul li > div {
    display: none;
    width: 500px;
    height: 300px;
    position: absolute;
    right: 300px;
    top: 0;
    background: #eee;
}

ul li:hover > div {
    display: block;
}

ul li {
    position: relative;
    width: 300px;
}

The ul is the menu and the div is the white box. He will get visible on hover. For better view add css.

If you have other markup please provide it.

EDIT: https://jsfiddle.net/58hzg54c/