A CodePen by Coopeh.

index.html

<div class="container">
    <div class="left">
        <ul>
            <li><a href="#">Menu Item 1</a>
                <ul>
                    <li><a href="#">Menu-Sub1</a></li>
                    <li><a href="#">Menu-Sub2</a></li>
                    <li><a href="#">Menu-Sub3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul>
    <span>Broken</span>    
    </div>
    <div class="right">
        <h3>Hover around here and you'll see the problem.</h3>Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla.
    </div>
</div>

<div class="container">
    <div class="left">
        <ul>
            <li><a href="#">Menu Item 1</a>
                <!-- Here's the fix, check the CSS for the class to get the explanation -->
                <ul class="fixed">
                    <li><a href="#">Menu-Sub1</a></li>
                    <li><a href="#">Menu-Sub2</a></li>
                    <li><a href="#">Menu-Sub3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul>
    <span>Fixed</span>    
    </div>
    <div class="right">
        <h3>Hover around here and you'll see it's fixed.</h3>Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla. Lots of text here, bla bla bla.
    </div>
</div>

style.less

.container { 
    width: 500px;
    font-family: arial;
    font-size: 14px;
    border: 1px solid #eee;
    height: 190px;
    margin: 10px;
    box-shadow: 0 0 5px 0 #eee;
    border-radius: 5px;

    .left { 
        float:left;
        width: 140px;
        height: 180px;

        ul {
            width: 140px;
            background: #eee;
            padding: 5px;
            margin: 10px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
        ul li {
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #f9f9f9;
            padding: 6px 0;
        }
        ul li:first-of-type {
            border-top: none;
        }
        ul li:last-of-type {
            border-bottom: none;       
        }
        ul li a { 
            display: block;
            color: #888;
            text-shadow: 0 1px 0 #fff;
            text-decoration: none;
        }
        ul li ul { 
            opacity: 0;
            position: absolute;
            width: 140px;
            padding: 5px;
            left: 163px;
            margin-top: -30px;
            background: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 3px;
            transition: opacity .25s ease-in-out;
        }
        ul li ul.fixed {
            /* This is how we fix the problem, attaching the fixed class and setting a negative z-index will hide the element behind any other elements. We could also set a higher z-index on the right block to achieve the same. */

            z-index: -1;

            /* End fix */
        }
        ul li:hover > ul { 
            opacity: 1;
            z-index: 2000;  
        }
        span {
            font-size:20px;
            color: #333;
            position: relative;
            bottom: -45px;
            left: 5px;
        }
    }
    .right { 
        float:right;
        width: 300px;
        margin: 10px;

        h3 {
            font-size: 26px;
        }
    }
}