CSS List Hover SubItems

I have a fiddle here http://ift.tt/1Chh9oO It has a basic html document with lists and sublists

<ul>
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
        </ul>
    </li>
</ul>

And I'm using the following css -

li:hover {
    background: #f7f7f7;
}

When I hover on an li item with a subitem(s), all the subitems also get highlighted. This is not desirable. I want only the list item on which the user's hovering to be highlighted. How can I achieve this ?

Also, I tried using the :not selector but it doesn't work.