Jump to content

Using Sub Dropdown not working


eddirae
 Share

Recommended Posts

Hello,

Using the "Navigation Bar with Dropdown", I am creating a dropdown under another dropdown.  When you run it, the dropdown under the dropdown shows as well.  How do I have it so that it doesn't show until I hover over the sub dropdown?

Here is the code

<!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">
      <button class="w3-button">Dropdown1</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4">
        <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 class="w3-dropdown-hover">
          <button class="w3-button">Dropdown2</button>
          <div class="w3-dropdown-content w3-bar-block w3-card-4">
            <a href="#" class="w3-bar-item w3-button">Link 4</a>
            <a href="#" class="w3-bar-item w3-button">Link 5</a>
            <a href="#" class="w3-bar-item w3-button">Link 6</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Thanks in advance for your help!!

Eddi Rae

 

Link to comment
Share on other sites

  • 2 weeks later...
On 4/25/2020 at 5:08 PM, Michele Costantino said:

Is it possible to have link 4,5,6 on the right of of dropdown2 ?

I'm fighting with this since 3 days...

So you can use this css

 position: relative;    
 left: 100%;
  top: 0;

Hope it'll help.

Thanks!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...