移动导航栏的下拉列表溢出

Question

所以我创建了一个带有下拉链接的导航栏，我的问题是，当我将鼠标悬停在链接上打开下拉列表时，它会溢出到右边，因为按钮位于导航栏的右端，它会使滚动条出现。我如何才能使下拉菜单中的链接从右侧开始？

    .navbar {
    	list-style-type: none;
    	overflow: hidden;
    	background: #3498db;
    	border-bottom: 1px solid #2c3e50;
    }
    
    .navbar-item {
    	float: left;
    }
    
    .navbar-item.right {
    	float: right;
    }
    
    .navbar-link {
    	display: block;
    	color: #ecf0f1;
    	text-align: center;
    	padding: 14px 16px;
    	text-decoration: none;
    }
    
    .navbar-link:hover, .navbar-link.active, .dropdown-content a:hover, .dropdown-content a.active {
    	background: #2980b9;
    }
    
    .dropdown-content {
    	display: none;
    	position: absolute;
    	background-color: #3498db;
    	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    	min-width: 120px;
    	z-index: 1;
    }
    
    .dropdown-content a {
    	color: #ecf0f1;
    	padding: 12px 16px;
    	text-decoration: none;
    	display: block;
    	text-align: left;
    }
    
    .dropdown:hover .dropdown-content {
    	display: block;
    }
    
    @media screen and (max-width: 600px) {
    	.navbar-item.right, .navbar-item {
    		float: none;
    	}
    }

<ul class="navbar">
    	<li class="navbar-item"><a href="#" class="navbar-link active">Home</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item dropdown">
    		<a href="javascript:void(0);" class="navbar-link">{PH}</a>
    		<div class="dropdown-content">
    			<a href="#">{PH}</a>
    			<a href="#">{PH}</a>
    			<a href="#">{PH}</a>
    		</div>
    	</li>
    	<li class="navbar-item dropdown right" id="membersbtn">
    		<a href="javascript:void(0);" class="navbar-link">Members</a>
    		<div class="dropdown-content">
    			<a href="#">Register</a>
    			<a href="#">Log In</a>
    		</div>
    	</li>
    </ul>

Answer 1

您需要添加.dropdown:hover .dropdown-content { right:0px;}

    .navbar {
    	list-style-type: none;
    	overflow: hidden;
    	background: #3498db;
    	border-bottom: 1px solid #2c3e50;
    }
    
    .navbar-item {
    	float: left;
    }
    
    .navbar-item.right {
    	float: right;
    }
    
    .navbar-link {
    	display: block;
    	color: #ecf0f1;
    	text-align: center;
    	padding: 14px 16px;
    	text-decoration: none;
    }
    
    .navbar-link:hover, .navbar-link.active, .dropdown-content a:hover, .dropdown-content a.active {
    	background: #2980b9;
    }
    
    .dropdown-content {
    	display: none;
    	position: absolute;
    	background-color: #3498db;
    	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    	min-width: 120px;
    	z-index: 1;
    }
    
    .dropdown-content a {
    	color: #ecf0f1;
    	padding: 12px 16px;
    	text-decoration: none;
    	display: block;
    	text-align: left;
    }
    
    .dropdown:hover .dropdown-content {
    	display: block;
        right:0px; /*Add this*/
    }
    
    @media screen and (max-width: 600px) {
    	.navbar-item.right, .navbar-item {
    		float: none;
    	}
    }

<ul class="navbar">
    	<li class="navbar-item"><a href="#" class="navbar-link active">Home</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item dropdown">
    		<a href="javascript:void(0);" class="navbar-link">{PH}</a>
    		<div class="dropdown-content">
    			<a href="#">{PH}</a>
    			<a href="#">{PH}</a>
    			<a href="#">{PH}</a>
    		</div>
    	</li>
    	<li class="navbar-item dropdown right" id="membersbtn">
    		<a href="javascript:void(0);" class="navbar-link">Members</a>
    		<div class="dropdown-content">
    			<a href="#">Register</a>
    			<a href="#">Log In</a>
    		</div>
    	</li>
    </ul>

Answer 2

你需要添加

.navbar-item.right .dropdown-content {
    right: 0;
}

见下文ex：

    .navbar {
    	list-style-type: none;
    	overflow: hidden;
    	background: #3498db;
    	border-bottom: 1px solid #2c3e50;
    }
    
    .navbar-item {
    	float: left;
    }
    
    .navbar-item.right {
    	float: right;
    }
    
    .navbar-link {
    	display: block;
    	color: #ecf0f1;
    	text-align: center;
    	padding: 14px 16px;
    	text-decoration: none;
    }
    
    .navbar-link:hover, .navbar-link.active, .dropdown-content a:hover, .dropdown-content a.active {
    	background: #2980b9;
    }
    
    .dropdown-content {
    	display: none;
    	position: absolute;
    	background-color: #3498db;
    	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    	min-width: 120px;
    	z-index: 1;
    }
    
    .dropdown-content a {
    	color: #ecf0f1;
    	padding: 12px 16px;
    	text-decoration: none;
    	display: block;
    	text-align: left;
    }
    
    .dropdown:hover .dropdown-content {
    	display: block;
    }
.navbar-item.right .dropdown-content {
right: 0;
}
    
    @media screen and (max-width: 600px) {
    	.navbar-item.right, .navbar-item {
    		float: none;
    	}
    }

<ul class="navbar">
    	<li class="navbar-item"><a href="#" class="navbar-link active">Home</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
    	<li class="navbar-item dropdown">
    		<a href="javascript:void(0);" class="navbar-link">{PH}</a>
    		<div class="dropdown-content">
    			<a href="#">{PH}</a>
    			<a href="#">{PH}</a>
    			<a href="#">{PH}</a>
    		</div>
    	</li>
    	<li class="navbar-item dropdown right" id="membersbtn">
    		<a href="javascript:void(0);" class="navbar-link">Members</a>
    		<div class="dropdown-content">
    			<a href="#">Register</a>
    			<a href="#">Log In</a>
    		</div>
    	</li>
    </ul>