导航栏布局如何实现定位，要使用float布局

我试了很多定位方法，但没法将导航栏放到图片的下方，咋回事。
原图：

img


我作品图：

img

img


我代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图书清单</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            .top {
                width: 1250px;
                height: 1090px;
                margin: 0 auto;
                background-color: lightblue;
            }

            #slj {
                width: 1230px;
                height: 50px;
                background-color: gainsboro;
                float: left;
            }

            .ccc a:link,
            .ccc a:visited {
                display: block;
                width: 20%;
                font-weight: 700;
                background-color: darkgray;
                color: white;
                padding: 20px;
                text-align: center;
                text-decoration: none;
            }

            .ccc a:hover,
            .ccc a:active {
                background-color: white;
                color: lightblue;
            }

            .ccc a {
                display: inline-block;
            }

            .ccc {
                float: left;
                
            }
        </style>
    </head>
    <body>
        <div class="top">
            <p style="text-align: center;">
                <img src="img/tou.png" />
            </p>
        </div>
        
        <div id="slj">
            <ul div class="ccc">
                <li><a href="#">主页</a></li>
                <li><a href="#">热销教材</a></li>
                <li><a href="#">精品套餐</a></li>
                <li><a href="#">最新上架</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>

    </body>
</html>

img