Moving Navigation Bar's

Moving Navigation Bar’s Drop Down’s Overflow

 

You need to add .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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here