چرا position عمل نمی‌کنه؟

سلام. می‌خواستم بدونم که در کد زیر چرا زیر منو تشکیل نمیشه؟

قسمت html:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Movietitle>
    <link rel="stylesheet" href="../css/style.css">
head>
<body>
    
    <header class="fluid">
        <a href=""><h1><img class="apple-logo" src="../img/apple logo.png" alt="apple logo">Apple Movieh1>a>
        <nav>
            <ul class="menu">
                <li><a href="">homea>li>
                <li class="has-sub-menu"><a href="">genresa>
                    <ul class="sub-menu">
                        <li><a href="">actiona>li>
                        <li><a href="">thrillera>li>
                        <li><a href="">horrora>li>
                        <li><a href="">romancea>li>
                        <li><a href="">comedya>li>
                        <li><a href="">Westerna>li>
                        <li><a href="">science fictiona>li>
                        <li><a href="">musicalsa>li>
                        <li><a href="">adventurea>li>
                        <li><a href="">dramaa>li>
                    ul>
                li>
                <li><a href="">besta>li>
                <li><a href="">helpa>li>
            ul>
        nav>
    header>
    
body>
html>

قسمت css:

@charset "UTF-8";
@import url("../css/reset.css");
.fluid{
    width: 100%;
}
.main{
    width: 1200px;
}
header{
    background-color: #212121;
    min-height: 50px;
    color: #E0E0E0 ;
    overflow: auto;
}
/* logo */
header h1{
    padding: 10px 0 15px 0;
    text-align: center;
}
header a h1{
    color: #E0E0E0;
}
.apple-logo{
    width: 50px;
    vertical-align: -16px;
    margin-right:5px ;
}
/* menu */
.menu li{
    display: inline;
    margin: 0 0 0 25px;
}
.menu li:hover{
    background-color: #313131;
}
.sub-menu li{
    display: block; 
}
.has-sub-menu{
    position: relative;
}
.sub-menu{
    position: absolute;
}
.sub-menu li a{
    color: #ec0e0e;
}