Hướng dẫn
Quảng cáo

Cách hiển thị và ẩn menu thả xuống khi di chuột bằng CSS

Chủ đề: HTML / CSSBài trước|Bài tiếp

Trả lời: Sử dụng CSS :hover

Nếu bạn chỉ muốn hiển thị và ẩn menu thả xuống khi di chuột, bạn không cần bất kỳ JavaScript nào. Bạn có thể thực hiện việc này đơn giản bằng cách sử dụng thuộc tính CSS display :hover.

Ví dụ sau đây sẽ chỉ cho bạn cách triển khai menu thả xuống đơn giản bằng CSS.

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style>
    ul {
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li {
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a {
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover {
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown {
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown {
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li {
        display: block;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products ▾</a>
            <ul class="dropdown">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

Câu hỏi liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này:

Advertisements