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

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...