html页面绝对定位不生效的问题

css第3行，给ul添加了绝对定位，想要单击点开ul后出现在图片上方，而不是将文字顶下去，但是没有达到预期的效果，是定位出了问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>植物大战僵尸</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="image/logo.png" id="logo">
        </div>
        <div class="menu" onmouseleave="show_menu1()">
            <div class="menu_title" onclick="show_menu()"><a href="#">内容分类</a></div>
            <ul id="menu1">
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <div class="auth">
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="banner">
            <img src="image/banner.jpg" class="banner-img" id="banner-img">
        </div>
    </div>
    <div class="footer"></div>
</body>
</html>
```css
*{
    padding: 0px;
    margin: 0px;
}
a{
    text-decoration: none; //删除超链接的下划线
}
#logo{
    width: 260px;
    height: 65px;
}
#banner-img{
    width: 1500px;
}
.header .logo{
    position: relative;
    float: left;
}
.header{
    margin: 25px auto;
    width: 1600px;
}
.header .menu ul{
    display: none;
    list-style: none; //删除列表项前的圆点
    position: absolute;    /*width: 80px;
    opacity: 0.5; //透明效果
    background-color: white;*/
}
.header .menu ul li{
    margin-top: 20px;
    text-align: center;
}
.header .menu{
    position: relative;
    float: left;
    margin-top: 18px;
    margin-left: 40px;
}
.header .menu:hover ul{
    display: block;
}
.header .menu .menu_title{
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}
.header .auth{
    float: right;
    margin-right: 120px;
}
.header .auth ul li{
    float: left;
    margin-right: 60px;
    margin-top: 18px;
    list-style: none;
}
.content{
    width: 1600px;
    margin: 25px auto;
}
.content .banner .banner-img{
    margin-top: 30px;

}

```javascript
/*
单击内容分类，实现显示、隐藏
 */
var flag=true;
function show_menu(){
    var menu1=document.getElementById("menu1");
    
    if(flag){
        menu1.style.display="block";
        flag=false;
    }else{
        menu1.style.display="none";
        flag=true;
    }
}

/*
鼠标移开实现隐藏
 */
function show_menu1(){
    var menu1=document.getElementById("menu1");
    menu1.style.display="none";
}

css的注释是/**/，不是//，css样式出问题了。截图中的2个地方注释有问题，

img


改下面就可以了，content建议清除浮动，加上clear:both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>植物大战僵尸</title>
    <style>

        * {
            padding: 0px;
            margin: 0px;
        }

        a {
            text-decoration: none;
            /*删除超链接的下划线*/
        }

        #logo {
            width: 260px;
            height: 65px;
        }

        #banner-img {
            width: 1500px;
        }

        .header .logo {
            position: relative;
            float: left;
        }

        .header {
            margin: 25px auto;
            width: 1600px;
        }

            .header .menu ul {
                display: none;
                list-style: none; /*//删除列表项前的圆点*/
                position: absolute; /*width: 80px;
    opacity: 0.5; //透明效果
    background-color: white;*/
            }

                .header .menu ul li {
                    margin-top: 20px;
                    text-align: center;
                }

            .header .menu {
                position: relative;
                float: left;
                margin-top: 18px;
                margin-left: 40px;
            }

                .header .menu:hover ul {
                    display: block;
                }

                .header .menu .menu_title {
                    border-bottom: 1px solid black;
                    padding-bottom: 20px;
                    width: 80px;
                    text-align: center;
                }

            .header .auth {
                float: right;
                margin-right: 120px;
            }

                .header .auth ul li {
                    float: left;
                    margin-right: 60px;
                    margin-top: 18px;
                    list-style: none;
                }

        .content {
            width: 1600px;
            margin: 25px auto;clear:both
        }

            .content .banner .banner-img {
                margin-top: 30px;
            }
    </style>
    <script>

        var flag = true;
        function show_menu() {
            var menu1 = document.getElementById("menu1");

            if (flag) {
                menu1.style.display = "block";
                flag = false;
            } else {
                menu1.style.display = "none";
                flag = true;
            }
        }

        /*
        鼠标移开实现隐藏
         */
        function show_menu1() {
            var menu1 = document.getElementById("menu1");
            menu1.style.display = "none";
        }

    </script>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="image/logo.png" id="logo">
        </div>
        <div class="menu" onmouseleave="show_menu1()">
            <div class="menu_title" onclick="show_menu()"><a href="#">内容分类</a></div>
            <ul id="menu1">
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <div class="auth">
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="banner">
            <img src="image/banner.jpg" alt="banner" class="banner-img" id="banner-img">
        </div>
    </div>
    <div class="footer"></div>
</body>
</html>

img


有其他问题可以继续交流~

有没有效果图片可以看看

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

想知道具体的需求是怎么样的，我这个截图点击打开后是显示在图片上方的

img