2 Level CSS Menu

Question

I have a menu for which I am trying to add another level roughly named "sub sub" by hovering on "Product 1". It's showing the "sub sub" menu, but it is not disappearing when the mouse hovers over "Product 2" or "Product 3". I don't know what I am doing wrong with the code.

Please have a look at HTML and CSS and let me know if anyone can help?

<div class="navigation">
            <li class="active">
                <a href="#">home</a>
            </li>
            <li>
                <a href="#">about</a>
            </li>
            <li>
                <a href="#">products</a>
                <div>
                    <a href="#">product 1</a>
                        <div>
                        <a href="#">sub sub</a>
                        </div>
                        <a href="#">product 2</a>
                        <a href="#">product 3</a>

                 </div>
            </li>
            <li>
                <a href="#">services</a>
            </li>
            <li>
                <a href="#">FAQ</a>
            </li>
        </div>

CSS is here:

.navigation {
            float: right;
            list-style: none;
            margin: 110px 0 0;
            padding: 0;
            }

.navigation li {
            font-family: "Segoe UI Web Regular","Segoe UI","Helvetica Neue",Arial;
            font-size: 20px;
            color: Maroon;
            float: left;
            margin-left: 50px;
            position: relative;
            margin-bottom: 40px;
            z-index:999;
            }

.navigation li > a {
        color: #505050;
        text-decoration: none;
            }

.navigation li:hover > a 
            {
            color:#D30404;
            }

.navigation li > div a {
            color: #505050;
            display: block;
            text-decoration: none;
            font-size: 17px;
            padding: 4px;
            margin-top: 2px;
            }

.navigation li:hover > div {
            color: #D30404;
        display: block;
            }

.navigation li > div a:hover {
         color: #fff;
         background-color: #D30404;
            }

.navigation li > div {
         background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: absolute;
             }

.navigation li div div a 
             {
             background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: relative;
             }

.navigation li div:hover > div a
             {
             display: block;
             position: absolute;
             margin-left: 110px;
             top: -2px;
             }

Answer 1

Got it! (Forgive me for changing your code so much.) http://jsfiddle.net/K7kPJ/4/

.navigation {
            list-style: none;
            margin: 0;
            padding: 0;
            }

.navigation li {
            font-family: "Segoe UI Web Regular","Segoe UI","Helvetica Neue",Arial;
            font-size: 20px;
            color: Maroon;
            float: left;
            margin-left: 50px;
            position: relative;
            margin-bottom: 40px;
            z-index:999;
            }

.navigation li > a {
        color: #505050;
        text-decoration: none;
    display:inline-block;
    height:30px;
            }

.navigation li:hover > a 
            {
            color:#D30404;
            }

.navigation li > div a {
            color: #505050;
            display: block;
            text-decoration: none;
            font-size: 17px;
            padding: 4px;

            }


.navigation li > div a:hover {
         color: #fff;
         background-color: #D30404;
            }

.navigation li > div {
         background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: absolute;
             }

.navigation li div div
             {
             background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: absolute;
   left:110px;
    top:0;
             }

.navigation li a:hover + div, .navigation li div:hover
             {
             display: block;
             }