Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tiêu đề</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        @media (min-width: 768px) {
            .dropdown:hover .dropdown-menu {
                display: block;
            }
        }

        .navbar-inverse {
            background-color: #99daf1;
            border-color: #99daf1;
        }

        .navbar-inverse .navbar-brand {
            color: green;
        }

        .navbar .collapse ul li a {
            color: black;
            text-transform: uppercase;
            font-weight: bold;
        }

        .navbar .collapse ul li ul {
            background-color: #99daf1;
        }

        .navbar .collapse ul li ul li a {
            text-transform: uppercase;
            font-weight: bold;
        }
        /* sub_menu sub_menu */

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu>.dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }

        .dropdown-submenu:hover>.dropdown-menu {
            display: block;
        }

        .dropdown-submenu>a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }

        .dropdown-submenu:hover>a:after {
            border-left-color: #fff;
        }
        /* .navbar .collapse ul li ul li ul {
            min-width: 0;
            border: 0;
            opacity: 0;
            visibility: hidden;
        }

        .navbar .collapse ul li ul li ul li {
            display: none;
        }

        .navbar .collapse ul li ul li ul:hover {
            opacity: 1;
            visibility: visible;
        }

        .navbar .collapse ul li ul li ul li a:hover {
            opacity: 1;
            visibility: visible;
            color: red;
        }

        .navbar .collapse ul li ul li a:hover {
            opacity: 1;
            visibility: visible;
            min-width: 160px;
            border: 1px solid rgba(0, 0, 0, .15);
            color: red;
        } */
        /* thay đổi độ lớn của navbar */
        /* ban đầu 80px thay đổi thành 40px */
        /* .navbar-md {
            min-height: 40px
        }

        .navbar-md .navbar-brand,
        .navbar-md .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px
        }

        .navbar-md .navbar-brand {
            height: 40px
        }

        .navbar-md .navbar-toggle {
            margin: 6px 12px 6px 0px;
            padding: 6px 7px 6px 7px;
        }

        .navbar-md .navbar-toggle .icon-bar {
            width: 19px;
        } */
        /* Create a small height at 30px */
        /*
        .navbar-sm {
            min-height: 30px
        }

        .navbar-sm .navbar-brand,
        .navbar-sm .navbar-nav>li>a {
            padding-top: 5px;
            padding-bottom: 5px
        }

        .navbar-sm .navbar-brand {
            height: 30px
        }

        .navbar-sm .navbar-toggle {
            margin: 3px 9px 3px 0px;
            padding: 4px 4px 4px 4px;
        }

        .navbar-sm .navbar-toggle .icon-bar {
            width: 16px;
        } */
        /* #head {
            background: #99daf1;
        } */

        .giohang {
            position: absolute;
            top: 6px;
        }
        /* ẩn và hover cho menu->menu_con->menu_con */

        .collapse .nav .dropdown-submenu:hover ul {
            /* color: red; */
            display: block;
        }

        .collapse .nav .dropdown-submenu ul {
            /* color: red; */
            display: none;
        }
    </style>
</head>

<body style="min-height: 3000px;">
    <nav id="annavbar" class="navbar navbar-inverse navbar-md navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Tên Shop Đây</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <!-- <li class="active"><a href="#">Home</a></li> -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Áo <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Áo kiểu</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Áo thun</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Áo sơ mi</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Áo khoác</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quần <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Quần Kaki</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Quần Jean</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Quần Short</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Quần Jogger</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Đầm nữ</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Giày <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Giày nam</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Giày nữ</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Nón <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Nón Snapback</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Nón Bucket</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Nón Phớt</a></li>
                        </ul>
                    </li>
                    <!-- Nếu chỉ có loại hàng => bỏ khác -->
                    <!-- <li><a href="#">Khác</a></li> -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Khác <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Không có sub_menu</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ba lô & túi xách</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Ba lô</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Túi xách</a></li>
                                </ul>
                            </li>
                            <li class="divider"></li>
                            <li class="dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Loại hàng</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">loại hàng 1</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">loại hàng 2</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">loại hàng 3</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">loại hàng 4</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">loại hàng 5</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span><i class="fas fa-search"></i></span>Tìm kiếm</a></li>
                    <li><a href="#"><span><i class="fas fa-shopping-cart"></i><span class="giohang">0</span></span>&nbsp;&nbsp;&nbsp; Giỏ hàng</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Đăng ký</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Đăng nhập</a></li>
                    <!-- <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <span>Xin chào: Tên hiển thị</span> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Trang cá nhân</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Đăng xuất</a></li>
                        </ul>
                    </li> -->
                </ul>
            </div>
        </div>
    </nav>
    <!-- <header>
        <div class="container">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-7">
                    <div class="form-group">
                        <div class="col-md-8">
                            <input type="search" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                        </div>
                        <div class="col-md-4">
                            but
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header> -->
    <p>a</p>
    <script>
        // document.addEventListener("DOMContentLoaded", function() {
        //     var navbar = document.getElementById('annavbar');
        //     // console.log(navbar);
        //     var trangthai = "duoi700";

        //     //bắt sự kiện khi người dùng cuộn chuột
        //     window.addEventListener('scroll', function() {
        //         if (window.pageYOffset > 700) {
        //             if (trangthai == 'duoi700') {
        //                 navbar.classList.add('navbar-fixed-top');
        //                 trangthai = 'tren700';
        //             }
        //         } else if (window.pageYOffset <= 700) {
        //             if (trangthai == 'tren700') {
        //                 navbar.classList.remove('navbar-fixed-top');
        //                 trangthai = 'duoi700';
        //             }
        //         }
        //     })
        // }, false);
    </script>

</body>

</html>