Simple CSS 3 dropdown

Hi, here is the simple code to create dropdown menu in CSS 3

HTML

<ul class="main_nav">
       
        <li><a href="#">WEBSITES</a>
            <ul class="sub_nav">
                <li><a href="#">Yahoo</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Microsoft</a></li>
                <li><a href="#">Facebook</a></li>
            </ul>
        </li>
       
    </ul>

CSS

ul, li{
            margin:0;
            padding:0;
            list-style-type:none;
        }
        
        a{
            text-decoration:none;
            font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
        }

        .main_nav {
            display:block;
            border:1px solid #CCC;
            height:50px;
            background-color:#EEE;
        }

.main_nav li {
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;  
}

        .main_nav > li {
            float:left;            
            height:100%;
            position:relative;            
        }

            .main_nav a
            {
                color: #000000;
                display: block;
                font-size: 15px;
                height: 100%;
                line-height: 49px;
            }

        .main_nav > li > a{            
            padding: 0 33px;
        }

        .main_nav > li:hover{
            background-color:#E4E4E4;
        }

        .main_nav > li:hover .sub_nav{
            background-color:#E4E4E4;
            display:block;
        }

        .sub_nav{
            display:none;
            background-color:#EEE;
            width:200px;
            position:absolute;
            top:50px;
            left:0;
            border-right:1px solid #CCC;
            border-bottom:1px solid #CCC;
            border-left:1px solid #CCC;
        }

        .sub_nav > li {
            display:block;
        }

        .sub_nav > li:hover{
            background-color:#c7aeae;
        }

        .sub_nav > li > a{
            padding:0 33px;
        }