Demo thực hành xây dựng menu đa cấp Live code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com menu Đa Cấp</title>
</head>
<style type="text/css" media="screen">
    body{
        margin: 0;
    }
    ul{
        margin: 0;
        padding: 0;
        padding-top: 13px;
        list-style: none;
        background-color: orange;
    }
    li{
        width: 150px;
        text-align: center; 
    }
    .menu > ul{
        height: 40px;
    }
    .menu > ul > li{
        display: inline-block;
        border-right: 1px solid #dddddd;
        position: relative;
    }
    .menu > ul > li > ul {
        display: none;
        position: absolute;
        top: 15px;
    }
    .menu > ul > li > ul li{
        padding: 5px 0;
        border-bottom: 1px solid #dddddd;
    }
    ul li:last-child{
        border: none;
    }
    .menu ul li:hover ul{
        display: block;
    }
</style>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">Trang Chủ</a></li>
            <li>
                <a href="#">Lập Trình</a>
                <ul>
                    <li><a href="#">Lập trình web</a></li>
                    <li><a href="#">Lập trình Mobile</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Database</a>
                <ul>
                    <li><a href="#">MySql</a></li>
                    <li><a href="#">MsSql</a></li>
                </ul>
            </li>
            <li><a href="#">Liên Hệ</a></li>
        </ul>
    </div>
</body>
</html>