Generic placeholder image

Menu Dropdown Tidak Terlihat Meski Telah di-Hover

Ditanyakan pada tanggal 9 May 2019 oleh Rizky Amalia

Saya sudah mengikuti langkah-langkah di atas, tapi pada akhirnya menu dropdown tidak terlihat. Boleh minta bantuan koreksi kah? Berikut code yang saya tulis

<!doctype html>

<html>
    <head>
            <title>My Webpage</title>
            <style type="text/css">
                .container{
                    width: 800px;
                    margin: 0 auto;
                }

                .header{
                    background-color: rgb(255, 255, 255);
                    min-height: 50px;
                    text-align: center;
                }

                .logo img {
                    width: 250px;
                }

                .menu ul {
                    padding: 0;
                }

                .menu ul li {
                    display: inline-block;
                    position: relative;
                }

                .menu ul li a {
                    padding: 10px 20px;
                    text-decoration: none;
                }

                ul.submenu {
                    background-color: #eee;
                    border: 1px solid #ccc;
                    text-align: left;
                    position: absolute;
                    top: 20px;
                    left: 0;
                    display: none;
                }

                .menu ul li:hover ul.sub.menu {
                    display: block;
                }

                ul.submenu li {
                    display: block;
                }

                ul.submenu li a {
                    display: block;
                    padding: 5px 10px;
                }

                .content{
                    background-color: #ddd;
                    min-height: 500px;
                    overflow: auto;
                }

                .thumbnail {
                    background-color: white;
                    text-align: center;
                    padding: 10px;
                    width: 225px;
                    margin: 10px;
                    float: left;
                }

                .thumbnail img {
                    width: 100%;
                }

                .footer{
                    background-color: #ccc;
                    min-height: 50px;
                    padding: 20px;
                    text-align: center;
                }
            </style>
    </head>

    <body>
        <div class="container">

        <div class="header">
            <h1>Logo Produk</h1>
            <div class="logo">
                <img src="https://devschool.id/resources/images/sample-logo.png">
            </div>

            <div class="menu">
                <ul>
                    <li><a href="#">Home</a></li>

                <li><a href="#">About</a>
                    <ul class="submenu">
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Education</a></li>
                        <li><a href="#">Portofolio</a></li>
                    </ul>
                </li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

        <div class="content">
            <h2>My Articles</h2>

            <div class="thumbnail">
                <img src="http://via.placeholder.com/250x150">
                <h2>Product 2</h2>
                <p>Rp 250.000</p>
            </div>

            <div class="thumbnail">
                    <img src="http://via.placeholder.com/250x150">
                    <h2>Product 2</h2>
                    <p>Rp 250.000</p>
                </div>

            <div class="thumbnail">
                    <img src="http://via.placeholder.com/250x150">
                    <h2>Product 2</h2>
                    <p>Rp 250.000</p>
                </div>

                <div class="thumbnail">
                        <img src="http://via.placeholder.com/250x150">
                        <h2>Product 2</h2>
                        <p>Rp 250.000</p>
                    </div>

                <div class="thumbnail">
                    <img src="http://via.placeholder.com/250x150">
                    <h2>Product 2</h2>
                    <p>Rp 250.000</p>
                    </div>

            <div class="thumbnail">
                    <img src="http://via.placeholder.com/250x150">
                    <h2>Product 2</h2>
                    <p>Rp 250.000</p>
                </div>
             <div class="thumbnail">
                    <img src="http://via.placeholder.com/250x150">
                    <h2>Product 2</h2>
                    <p>Rp 250.000</p>
                </div>
                <div class="thumbnail">
                        <img src="http://via.placeholder.com/250x150">
                        <h2>Product 2</h2>
                        <p>Rp 250.000</p>
                    </div>

                    <div class="thumbnail">
                            <img src="http://via.placeholder.com/250x150">
                            <h2>Product 2</h2>
                            <p>Rp 250.000</p>
                        </div>

                    <div class="thumbnail">
                            <img src="http://via.placeholder.com/250x150">
                            <h2>Product 2</h2>
                            <p>Rp 250.000</p>
                        </div>

                        <div class="thumbnail">
                                <img src="http://via.placeholder.com/250x150">
                                <h2>Product 2</h2>
                                <p>Rp 250.000</p>
                            </div>

                        <div class="thumbnail">
                            <img src="http://via.placeholder.com/250x150">
                            <h2>Product 2</h2>
                            <p>Rp 250.000</p>
                            </div>

                    <div class="thumbnail">
                            <img src="http://via.placeholder.com/250x150">
                            <h2>Product 2</h2>
                            <p>Rp 250.000</p>
                        </div>
                     <div class="thumbnail">
                            <img src="http://via.placeholder.com/250x150">
                            <h2>Product 2</h2>
                            <p>Rp 250.000</p>
                        </div>
        </div>

        <div class="footer">
            <p>copyright 2018 My Page</p>
        </div>
    </div>
    </body>
</html>