<header>
        <div id="logo">
            <img src="https://devmaster.edu.vn/images/logo.png" alt="Viện Công Nghệ Và Đào Tạo Devmaster">
        </div>
    </header>
    <nav>
        <ul>
            <li><a href="#" title="Trang chủ">Trang chủ</a></li>
            <li><a href="#" title="Giới thiệu">Giới thiệu</a></li>
            <li><a href="#" title="Khóa học chuyên đề">Khóa học chuyên đề</a>
                <!-- menu con sổ xuống cấp 1 -->
                <ul>
                    <li><a href="#" title="Lập trình C/C++">Lập trình C/C++</a></li>
                    <li><a href="#" title="Lập trình Web PHP&MySQL">Lập trình Web với PHP&MySQL</a></li>
                    <li>
                        <a href="#" title="Lập trình Web ASP.NET">Lập trình Web với ASP.NET MVC 5</a>
                        <!-- menu con sổ ngang cấp 2 -->
                        <ul>
                            <li><a href="#" title="Lập Trình hướng đối tượng với C# (30h)">1. Lập trình hướng đối tượng với C#(30h)</a></li>
                            <li><a href="#" title="Lập trình cơ sở dữ liệu SQL Server (20h)">2. Lập trình cơ sở dữ liệu SQL Server (20h)</a></li>
                            <li><a href="#" title="Lập trình giao diện web với HTML5 (30h)">3. Lập trình giao diện web với HTML5 (30h)</a></li>
                            <li><a href="#" title="Lập trình ứng dụng với ASP.NET MVC 5 (20h)">4. Lập trình ứng dụng ASP.NET MVC 5 (20h)</a></li>
                            <li>
                                <a href="#" title="Xây dựng dự án với ASP.NET MVC 5(30h)">5. Xây dựng dự án với ASP.NET MVC 5(30h)</a>
                                <!-- menu con sổ ngang cấp 3 -->
                                <ul>
                                    <li><a href="#" title="Xây dựng bài toán">Xây dựng bài toán</a></li>
                                    <li><a href="#" title="Thiết kế giao diện chức năng">Thiết kế giao diện chức năng</a></li>
                                    <li><a href="#" title="Phát triển dự án">Phát triển dự án</a></li>
                                </ul>

                            </li>
                        </ul>
                    </li>
                    <li><a href="#" title="Lập trình Web Java Spring">Lập trình Web Java Spring Framework</a></li>
                </ul>
            </li>
            <li><a href="#" title="Dịch vụ">Dịch vụ</a>
                <ul>
                    <li><a href="#" title="Thực tập chuyên đề">Thực tập sinh chuyên đề</a></li>
                    <li><a href="#" title="Sản xuất phần mềm">Sản xuất phần mềm</a></li>
                </ul>
            </li>
            <li><a href="#" title="Liện hệ">Liên hệ</a></li>
        
        </ul>
    </nav>

*{
    margin: 0;
    padding: 0;
}
header, nav{
    /* canh giữa cách lề mỗi bên 10% */
    margin: 5px 10%;
}
nav{
    background: #484848; /*tô màu cho menu cha*/
    border-radius: 5px; /* bo góc */
}
nav ul{
    display: flex;
}
nav> ul li{
    list-style: none; /* bỏ dấu chấm mặc định của li */
    /* kẻ đường bên trái và bên phải của li */
    border-right: 1px solid #ccc;
    border-left:1px solid #333;
}
nav> ul li a{
    display: block;
    padding: 0 25px;
    line-height: 50px;
    color: #f1f2f3;
    text-decoration: none;
}
nav ul li:first-child {
    border-left: none; /* bỏ đường kè trái của phần tử đầu tiên */
}
nav> ul li:first-child a{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
/* Khi hover đến li, tô màu cho thẻ a */
nav ul li:hover>a{
    background: red;
    opacity: .7;
    color: yellow;
}
/*menu con*/
/*Ẩn các menu con cấp 1,2,3*/
nav li ul{
    display: none;
    min-width: 350px;
    position: absolute;
}
nav li>ul li{
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    background: #999;
    text-align: left;
}
nav li>ul li:first-child a{
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
nav li>ul li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
nav li>ul li:last-child a{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
/*khi hover thì hiện menu con*/
nav  li:hover > ul{
    display:  block;
}
/*Hiển thị menu con cấp 2,3,4 bên cạnh phải*/
nav > ul li > ul li >ul{
    margin-left: 352px;
    margin-top: -50px;
}