Parent object won't stay hovered when children are hovered

    <ul class="ul-wrap">
        <li>
        <a href="#"><div class="list-div">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                <line class="left" x1="0" y1="0" x2="0" y2="-23"/>
            </svg>
            My Portfolio
        </div></a>

            <ul class="submenu">
                <li><a href="#">Web</a></li>
                <li><a href="#">Graphic</a></li>
                <li><a href="#">Others</a></li>
            </ul>

        </li>
    </ul>

a { 
    text-decoration: none;
    color:#666666;
}
.ul-wrap {
    display: block;
    float:left;
    list-style-type: none;
    text-align: right;
    margin-top: 35px;
}

.ul-wrap li{
    margin-top: 12px;
    font-size: 1.08em;
    display: inline-block;
}

.list-div {
    padding-left: 14px;
    position: relative;
}

/* cool border effect thing*/

.list-div svg {
    position: absolute;
    top: 0;
    left: 0;
}

.list-div svg line {
    stroke-width: 6;
    stroke: #2bc2c4;
    fill: none;
    -webkit-transition: all 0.08s ease-in-out;
    transition: all 0.08s ease-in-out;
}

.list-div svg line.left {
    stroke-dasharray: 490 400;
}
.list-div:hover svg line.left {
    -webkit-transform: translateY(23px);
    transform: translateY(23px);
}

/*----*/

.submenu {
    list-style-type: none;
    font-size: 0.85em;
    margin-top: 0px;
    padding: 0;
}

.submenu li {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.7);
}

.submenu li a:hover{
    border: none;
    color: #2bc2c4;
}