Đang load dữ liệu
Tạo trang menu.html với cấu trúc như sau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu CSS</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<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="Sản phẩm">Sản phẩm</a>
<ul>
<li><a href="#" title="Lập trình Web PHP">Lập trình Web PHP</a></li>
<li><a href="#" title="Lập trình Web ASP.NET">Lập trình Web ASP.NET MVC 5</a></li>
<li><a href="#" title="Lập trình Web Java Spring">Lập trình Web Java Spring</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>
</body>
</html>
Sử dụng các kỹ thuật css cơ bản:
- Tạo trang menu.css cùng cấp với thư mục menu.html
* Sử dụng các kỹ thuật:
- CSS tương tác đến toàn bộ phần tử
- CSS tương tác đến các thẻ html
- CSS tương tác đến các bộ chọn...
*{
margin: 0;
padding: 0;
}
header, nav{
margin: 5px 10%;
}
nav{
background: #484848;
height: 50px;
border-radius: 5px;
}
nav ul{
position: relative;
height: 50px;
}
/*dàn hàng ngang; các phần tử li tiếp theo bám theo các li phía trước*/
nav ul li{
float: left;
list-style: none;
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;
}
/*bỏ đường kẻ bên trái của phần tử li đầu tiên*/
nav ul li:first-child {
border-left: none;
}
nav> ul li:first-child a{
border-left: none;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
nav ul li:hover>a{
background: red;
opacity: .7;
color: yellow;
}
/*menu con*/
nav li>ul{
display: none; /* ban đầu ẩn menu con */
width: 280px;
position: absolute;
}
nav li>ul li{
width: 100%;
border: none;
border-bottom: 1px solid #ccc;
background: #999;
}
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>ul li:hover ul{
display: block;
}
.png "Lập trình frontend với reacjs (Full)")