لماذا لا يعمل التدفق في قوائم الروابط؟

في هذا الكود لماذا لا يعمل التدفق في قائمة الروابط التي أنشأتها؟

<!DOCTYPE html>  
<html dir="rtl">  
<head>  
    <title>home</title>  


    <style>  
        div.main-topics > ul {  
            list-style-type: none;  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
            background-color: #f1f1f1;  
        }  


        div.main-topics > ul > li {  
            display: block;  
            padding: 8px; 
        }  


        div.main-topics > ul > li > a {  
            display: block;  
            color: #000;  
            padding: 12px 16px;  
            text-decoration: none;  
            font-size: 20px;  
        }  


        div.main-topics > ul > li > a:hover {  
            color: white;  
            background-color: #444;  
        }  


        div.main-topics > img {  
            float: right;  
            margin-left: 5px;  
        }  
        div.title-main-topics-font-size{
        font-size: 30px;
        }
  
    </style>  
</head>  
<body>  
    <div class="main-topics">  
        <ul>  
            <li><a href="#home">  
                <div class="title-main-topics-font-size"><u>حيوانات:</u></div>
                <br>  
                <!--ضع مكان الرابط صورة مربعة-->
                <img src=""/>  
                أكتشف العجائب الرائعة لهذه الكائنات الجميلة. سواء كنت تحب الحيوانات أو الطيور أو الكائنات البحرية. فنحن جميعاً نحب هذه الحكائنات الكبيرة و الصغيرة.
            </a></li>  
            <li><a href="#services">آلات</a></li>  
            <li><a href="#contact">بلدان</a></li>  
            <li><a href="#about">طعام</a></li>  
            <li><a href="#about">فن</a></li>  
        </ul>  
    </div>  
</body>  
</html>