RRR Posted May 13, 2021 Share Posted May 13, 2021 Below is an excerpted example from the w3schools website with a right justified on hover dropdown but the dropdown will NOT right justify. Can someone please assist here? Thankyou. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <div class="w3-dropdown-hover w3-right"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
niche Posted May 13, 2021 Share Posted May 13, 2021 try float:right; Link to comment Share on other sites More sharing options...
RRR Posted May 13, 2021 Author Share Posted May 13, 2021 float:right; does not work either. Link to comment Share on other sites More sharing options...
RRR Posted May 13, 2021 Author Share Posted May 13, 2021 Solution. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body > <div class="w3-container" > <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div style="position:relative;"> <!-- Enclosing the entire menu in a relative div resolves the issue --> <div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <div class="w3-dropdown-hover w3-right"> <button class="w3-button">Dropdown</button> <div> <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0px;"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
niche Posted May 14, 2021 Share Posted May 14, 2021 Good work. Link to comment Share on other sites More sharing options...
PascalZ Posted May 15, 2021 Share Posted May 15, 2021 Hello, To right align the dropdown items, you can add the w3-right-align class to the anchors of the dropdown as shown below: <div class="w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button w3-right-align">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-right-align">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-right-align">Link 3</a> </div> Hope this is useful PascalZ Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now