Simpe drop down menu with html and css : What am i doing wrong in this code? I want to see a drop down menu as soon as i hover on the "About" button, but instead of hovering, I only see half of the drop down menu. Plzzzzzzzz help me. here is the code. 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    .dropdown { 
            position: relative;
    		display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .goCenter { 
                text-align: center;
    			color: white;
    }

    body { 
              background-color: #1A1617
    }

    ul { 
           text-align: center;
           list-style-type: 0px;
    	   margin: 0px;
    	   padding: 20px;
    	   background-color: black;
    	   overflow: hidden;
    }

    li a { 
    		 color: white;
    		 padding: 8px 16px;
    		 text-decoration: none;
    }

    li { 
         display: inline;
    }

    li a:hover { 
           background-color: red;
    	   text-size: 10px;
    }

    .dropdown:hover .dropdown-content { 
            display: block;
    }
    </style>
    </head>
    <body>

    <ul>
     <li><a href="home.html">Home</a></li>
     <li><a href="news.html">News</a></li>
     <div class="dropdown">
     <li><a href="about.html">About</a></li>
     <div class="dropdown-content"> 
             <p>Check</p>
     <div>
     </div>
     </ul>
     
    <p class="goCenter"><strong></strong></p>
     
    </body>
    </html>

<!-- end snippet -->

