Two level Menu with CSS And UL

Two level menu with CSS and UL

CSS
.menu > li                      /*Main Header */
{
     float: left;               /* To Make all Li Align Horizontally*/
     margin-left:15px;          /*Have Padding between two Menu*/
     list-style: none;    
}

.menu ul                        /* First Level */
{
    display:none;               /*Hide the First level Menu */
    position: absolute;         /*Relative Positioning for first level menu so that it appear in same line of header*/  
    list-style-type:none;       /*Remove bullets for list*/
    list-style: none;           /*Remove bullets for list*/
    margin:0;
padding:0;
   
    width:150px;
    background-color: beige;  
}

.menu ul li ul
{

    display: none;              /* Hide Second Level {Sub Menu}*/
    position: absolute;         /*Absoulate Positioning to make is align (Same Line of Second level menu*/  
    margin-left:75px;          /*Add Left Margin to sub Menu to have gap between Parent and Child Sub Menu*/
    padding: 0;

         
    width: 100px;
    background-color: red;
}

.menu > li:hover > ul        /*Open First level next row or bottom of header, {.menu > li} Only for    */
{
    display:block;            /*Show UL*/
}

.menu ul li:hover > ul       /*Show Multi level in same line of parent*/
{
    display:inline;           /*Show UL*/
}


.menu  a                        /*All Link tag under .menu Class*/
{
    text-decoration:none;        /*Remove Hyperlink for text*/
}


.menu  a:hover                 /*All Link tag under .menu Class when hovered*/
{
    color:yellowgreen;                 /*Change Forecolor*/
}



HTML

<ul class="menu"  >
                <li><a href="#">Masters</a></li>          
                <li><a href="#">Basic Masters</a>
                    <ul>
                        <li><a href="#">Geo</a>
                            <ul>
                                <li><a href="#">Countries</a></li>
                                <li><a href="#">States</a></li>
                                <li><a href="#">Cities</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Group Setup</a></li>
                    </ul>      
                </li>  
                <li><a href="#">Transaction</a> </li>
          </ul>