Jump to content

RRR

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by RRR

    Right justified dropdown in menu will not right justify

    in CSS

    Posted

    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>

    Right justified dropdown in menu will not right justify

    in CSS

    Posted

    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>

×
×
  • Create New...