<div id="menu">
<ul style="z-index:2" class="MyALoNav">
<li class="MyALoli"><a href="#" class="MyALoMILink">Trường học</a>
<ul class="MyALoSubM">
<li class="MyALoCol">
<span class="MyALoItemTitle">Mầm non</span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp mầm</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp chồi</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp lá</a></span>
</li>
<li class="MyALoCol">
<span class="MyALoItemTitle"><a href="#">Tiểu học</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 1</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 2</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 3</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 4</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 5</a></span>
</li>
<li class="MyALoCol">
<span class="MyALoItem"><a href="#">THCS</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 6</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 7</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 8</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp 9</a></span>
</li>
</ul>
</li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Kỹ năng</a>
<ul class="MyALoSubM">
<li class="MyALoCol">
<span class="MyALoItemTitle">Mầm non</span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp mầm</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp chồi</a></span>
<span class="MyALoItem"><a href="#" class="MyALoColorText">Lớp lá</a></span>
</li>
</ul>
</li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Kinh doanh</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Âm nhạc</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Nghệ thuật</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Thời trang</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Ngoại ngữ</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Xã hội</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Chính trị - Pháp luật</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Sức khỏe</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Y tế</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Công nghệ thông tin</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Thiết kế</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Marketing</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Ẩm thực</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Vật nuôi</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Cây trồng</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Thể thao</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Dạy nghề</a></li>
<li class="MyALoli"><a href="#" class="MyALoMILink">Khác</a></li>
</ul>
</div>
body {
font-family: sans-serif;
font-size: 15px;
}
#menu ul {
background: #ffffff;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
#menu li {
width: auto;
height: 40px;
line-height: 40px;
padding: 0 1em;
}
#menu li a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
}
/*CSS khi di chuột qua chuyên mục cha sẽ hiển thị hiệu ứng*/
#menu .MyALoli:hover{
background-color: #ff0000;
border-color: #ff0000;
}
/*CSS chuyên mục cha*/
#menu .MyALoli:first-child {
border-top: 1px solid rgb(225, 225, 225);
border-radius: 4px 0px 0px;
}
#menu .MyALoli{
background-color: rgb(255, 255, 255);
height: calc(33.9375px);
border-left: 1px solid rgb(225, 225, 225);
border-right: 1px solid rgb(225, 225, 225);
}
/*CSS khi di chuột qua link sẽ hiển thị hiệu ứng*/
#menu .MyALoColorText:hover {
color: #ff0000;
}
#menu ul li {
position: relative;
}
/*CSS sub-menu*/
#menu .MyALoSubM {
display: block;
width: 998px;
height: 668px;
position: absolute;
top: 0px;
bottom: 0px;
left: 100%;
margin-left: 0px;
box-shadow: rgba(0, 0, 0, 0.06) -2px 0px 8px 0px;
z-index: 1;
padding: 14px 20px;
border-width: 1px 1px 1px 0px;
border-style: solid;
border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(225, 225, 225);
background: rgb(255, 255, 255);
border-radius: 0px 4px 4px 0px;
overflow: hidden;
}
#menu .MyALoSubM {
position: absolute;
left: 243px;
top: 0;
display: none;
}
#menu li:hover .MyALoSubM {
display: block;
}
/*CSS Navigation__Wrapper*/
#menu .MyALoNav{
position: relative;
width: 244px;
margin: 0px;
padding: 0px;
list-style: none;
}
/*CSS MenuItem*/
#menu .MyALoMItem{
background-color: rgb(255, 255, 255);
height: calc(33.9375px);
border-left: 1px solid rgb(225, 225, 225);
border-right: 1px solid rgb(225, 225, 225);
}
#menu .MyALoMItem:first-child {
border-top: 1px solid rgb(225, 225, 225);
border-radius: 9px 2px 0px 0px;
}
/*CSS MenuItem__MenuLink*/
#menu .MyALoMILink{
position: relative;
display: flex;
-webkit-box-align: center;
align-items: center;
z-index: 2;
color: rgb(68, 68, 68);
font-size: 13px;
font-weight: 400;
letter-spacing: 0px;
height: 100%;
text-decoration: none;
}
/*CSS SubMenu__NavSubCol*/
#menu .MyALoCol{
padding-right: 12px;
float: left;
width: 25%;
display: block;
}
/*CSS SubMenu__NavSubItem*/
#menu .MyALoItem{
display: block;
color: rgb(68, 68, 68);
font-size: 13px;
margin-right: 0px;
letter-spacing: 0.1px;
font-weight: 400;
line-height: 22px;
text-decoration: none;
}
/*CSS SubMenu__NavSubItemTitle*/
#menu .MyALoItemTitle{
display: block;
color: rgb(68, 68, 68);
font-size: 13px;
margin-right: 0px;
letter-spacing: 0.1px;
line-height: 22px;
font-weight: 500;
text-decoration: none;
}