Navigation bar là một trong những thành phần phổ biến và quan trọng nhất trong trang web.Có rất nhiều phương pháp để làm được một menu trong website như ứng dụng jquery,html hay css.Nếu bạn mới bắt đầu học html thì việc làm menu đơn thì lại rất đơn giản nhưng việc tạo menu đa cấp thì lại có một chút phức tạp.Sau đây mình xin hướng dẫn bạn cách tạo một menu đa cấp trong thiết kế web bằng html và css

Phần 1: Tạo file index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ek+Mukta">
<title>Cách tạo menu trong thiết kế web bằng html css</title>
</head>
<body>
<div class="wrapper">
    <nav class="menu">
        <ul class="clearfix">
            <li><a href="#">Trang chủ</a></li>
            <li>
                <a href="#">Ẩm thực <span class="arrow">&#9660;</span></a>
 
                <ul class="sub-menu">
                    <li><a href="#">Món ăn miền Bắc</a></li>
                    <li><a href="#">Món ăn miền Trung</a></li>
                    <li><a href="#">Món ăn miền Nam</a></li>
                    <li><a href="#">Ẩm thực đường phố</a></li>
                </ul>
            </li>
            <li><a href="#">Du lịch</a></li>
            <li class="current-item"><a href="#">Ảnh</a></li>
            <li><a href="#">Liên hệ</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

Chú thích:

Nạp font Ek+Mukta từ trên internet và file style.css vào file index.html

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ek+Mukta">
<link href="css/style.css" rel="stylesheet" type="text/css" />

Chúng ta sẽ bắt đầu một trang web với một thẻ <div> với class=”wrapper” bên trong thẻ <div> ta đặt một thẻ <nav> để xác định phần menu và đặt tên class=”menu”

<div class="menu-wrap">
    <nav class="menu">
        <!—phần menu đặt ở đây-->
    </nav>
</div>

Đầu tiên ta tạo một thẻ danh sách các danh mục có trong menu

       <ul class="clearfix">
           <li><a href="#">Trang chủ</a></li>
           <li><a href="#">Ẩm thực <span class="arrow">&#9660;</span></a></li>
           <li><a href="#">Du lịch</a></li>
           <li class="current-item"><a href="#">Ảnh</a></li>
           <li><a href="#">Liên hệ</a></li>
        </ul>

Phần class=”Clearfix” sau này ta sẽ sử dụng để viết trong css

Phần menu con ta tạo thêm một thẻ danh sách nằm trong thẻ <li> cha

Ví dụ ta đặt danh mục “Ẩm thực” làm danh mục cha thì những danh mục con của nó phải nằm trong thẻ <li> của danh mục ẩm thực. Ta đặt class=”sub-menu” để xác định đây là phần menu con

           <li>
                <a href="#">Ẩm thực <span class="arrow">&#9660;</span></a>
 
                <ul class="sub-menu">
                    <li><a href="#">Món ăn miền Bắc</a></li>
                    <li><a href="#">Món ăn miền Trung</a></li>
                    <li><a href="#">Món ăn miền Nam</a></li>
                    <li><a href="#">Ẩm thực đường phố</a></li>
                </ul>
            </li>

Phần 2: Trang trí cho menu thêm sinh động hơn

Ta tiến hành tạo file style.css

/*
    Document   : style
    Created on : Mar 1, 2015, 8:21:25 PM
    Author     : Team bictweb
    Website    : https://bictweb.vn
*/

* {
    margin:0px;
    padding:0px;
}
.clearfix:after {
    display:block;
    clear:both;          
}
.wrapper {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2); 
    background:#3e3436;
}
 
/*----- Phần menu -----*/
.menu {
    width:1000px;
    margin:0px auto;
    background:#bf5c71;
    height: 50px;
    margin-top: 150px;
}
.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}
.menu a {
    transition:all linear 0.15s;
    color:#919191;
    text-decoration:none;
}
.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#be5b70;
} 
.menu .arrow {
    font-size:11px;
    line-height:0%;
} 
/*----- css cho phần menu cha -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}
.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    color:white;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}
/*----css cho menu con----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
}
.sub-menu li {
    display:block;
    font-size:16px;
}
.sub-menu li a {
    padding:10px 30px;
    display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
}

Kết quả:

Như vậy mình đã hướng dẫn xong các bạn tạo menu đa cấp trong thiết kế web bằng html css rồi.Nếu có điều gì còn thắc mắc hãy comment ở phần dưới đây nhé có gì mình sẽ giải đáp