/* CSS cho menu ngang */
.hmenu {
    margin: 0px; /* Loại bỏ khoảng cách mặc định của thẻ ul */
    padding: 0px; /* Loại bỏ khoảng cách mặc định của thẻ ul */
    border-radius: 5px;
    box-shadow: 0 0 5px orangered;
    list-style: none;
    /* Loại bỏ dấu chấm đầu dòng của danh sách */
    background-color: orangered;
    height: 40px;
}

ul.hmenu>li>a {
    /*
    Thẻ <a> bọc kín cả vùng menu (toàn chiều rộng cha <li>).
    Khi hover, hiệu ứng sẽ áp dụng nguyên cả vùng menu (cao 40px).
    */
    display: block;
    line-height: 40px;
    text-decoration: none;
    font-variant: small-caps;
    padding-left: 25px;
    color: white;
}

ul.hmenu>li>a:hover {
    color: yellow;
    font-weight: bolder;
}

ul.hmenu>li {
    /* Mỗi <li> trong menu sẽ trôi sang trái và xếp liên tiếp nhau trên cùng một hàng, tạo thành menu ngang. */
    float: left;
    margin: 0px 5px;
    /* Tạo ngữ cảnh định vị tương đối cho phần tử con bên trong (nếu có) */
    position: relative;
}

ul.hmenu>li:hover>.sub-menu {
    /* Hiển thị menu con khi hover vào mục menu cha */
    display: block;
}

/* CSS cho menu thả xuống (submenu) */
.sub-menu {
    margin: 0px; /* Loại bỏ khoảng cách mặc định của thẻ ul */
    padding: 0px; /* Loại bỏ khoảng cách mặc định của thẻ ul */
    border-radius: 5px;
    box-shadow: 0 0 5px orangered;
    list-style: none;
    width: 150px;
    /* Định vị tuyệt đối so với phần tử cha có position: relative */
    position: absolute; 
    /* Ẩn menu con ban đầu */
    display: none;
    z-index: 100; /* Đảm bảo menu con hiển thị trên các phần tử khác */
}

.sub-menu>li>a {
    display: block;
    line-height: 30px;
    border-bottom: 1px dotted orangered;
    text-decoration: none;
    font-variant: small-caps;
    padding-left: 25px;
    background: white;
    /*background: url('bi.gif') no-repeat left center;*/
    color: orangered;
}

.sub-menu>li>a:hover {
    background: yellow;
    /*background: url('b2.gif') no-repeat left center;*/
    color: red;
    font-weight: bolder;
}

/* CSS cho menu phải */
.right-menu {
    margin: 0px; /* Loại bỏ khoảng cách mặc định của thẻ ul */
    padding: 0px; /* Loại bỏ khoảng cách mặc định của thẻ ul */
    list-style: none;
    width: 100%;
}

.right-menu>li>a {
    display: block;
    line-height: 30px;
    border-bottom: 1px dotted orangered;
    text-decoration: none;
    font-variant: small-caps;
    padding-left: 25px;
    background: white;
    color: orangered;
}

.right-menu>li>a:hover {
    color: red;
    font-weight: bolder;
}