下拉菜单移动目录“位置：绝对”

Question

我正在尝试在html中创建一个下拉菜单。但是，当我定位：绝对时，我的下拉菜单不显示。当我摆脱位置时：绝对；下拉菜单会移动内容。我认为这有点小。我不确定自己做错了什么。

    .navbar{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: middle;
        top:0;
        width: 100%;
        position: sticky;
        position: -webkit-sticky;
        background-image: linear-gradient(to right, rgba(255,0,255,0), 
            rgba(255,0,0,1));
        position: relative;
    }

    .dropdown-content {
        display: none;
        position:absolute;
        background-color:grey;
        min-width: 200px;
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

<div class = "navbar">
        <li><a href = "#about"> About</a></li>
        <li><a href = "#resume">Résumé </a></li>
        <li>
            <div class = "dropdown">
	            <button class = "dropbtn">Portfolio </button>
	            <div class = "dropdown-content">
	                <a href = "#CS"> Computer Science </a>
	                <a href = "#E"> Entrepreneurship </a>
	                <a href = "#P"> Photography </a>
	            </div>
	        </div>
        </li>
        <li><a href = "#contact"> Contact </a></li>	
    </div>

Answer 1

您的导航栏没有显示溢出的内容，只需添加overflow: visible就可以解决此问题。

    .navbar{
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #333;
        position: middle;
        top:0;
        width: 100%;
        position: sticky;
        position: -webkit-sticky;
        background-image: linear-gradient(to right, rgba(255,0,255,0), 
            rgba(255,0,0,1));
        position: relative;
        overflow: visible;
    }

    .dropdown-content {
        display: none;
        position:absolute;
        background-color:grey;
        min-width: 200px;
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

<div class = "navbar">
        <li><a href = "#about"> About</a></li>
        <li><a href = "#resume">Résumé </a></li>
        <li>
            <div class = "dropdown">
	            <button class = "dropbtn">Portfolio </button>
	            <div class = "dropdown-content">
	                <a href = "#CS"> Computer Science </a>
	                <a href = "#E"> Entrepreneurship </a>
	                <a href = "#P"> Photography </a>
	            </div>
	        </div>
        </li>
        <li><a href = "#contact"> Contact </a></li>	
    </div>