Jump to content

w3.css - w3-dropdown-hover problem, bug?


Recommended Posts

hello, new user of w3.css here...

I'm trying to create a navigation bar with dropdown elements. If the dropdown is the first element in the bar, it is always highlighted, as if you'd hover over it, and it keeps that state.

Example (from the try-editor, just change the order of elements so that w3-dropdown-hover is the first one)

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<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">

    <div class="w3-dropdown-hover">
      <button class="w3-button">Dropdown</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>
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <a href="#" class="w3-bar-item w3-button">Link 1</a>


What am I doing wrong here? Or is it a bug?

thanks for a tip, uno

Link to comment
Share on other sites

seems so. Unfortunately the page I'm going to build has only one page, but quite some embedded functionality, where I'd need the a few dropdowns for navigation. Would be a pitty if had to drop w3.ccs because of this.  Any ideas on how that could be fixed?

thanks, uno

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

  • Create New...