Html Question posted in
Some basic documentation can be found here.

Html – Drop-down list appears even though my cursor isn't hovering above it

My drop-down list should only appear once I hover over the "Text-generative AI" button. However, once I move my cursor anywhere along the button’s left side, the drop down list appears.

Here’s the code:

*HTML

<!DOCTYPE html>
<html>
    <link rel = "stylesheet" href = "style.css">

    <head>
        <title>Productivity Tools</title>
    </head>
    
    <body>
        <h1>TECH TEAM <img src = "imgs/ebmnhs_logo.jpg" style = "position:relative; left:1200px;" height = "50"></h1>
        <hr>

        <div class = "dropdown">
            <button>Text-generative AI</button>
            <div class = "content">
                <a href = "https://chat.openai.com/" target = _blank>ChatGPT</a>
                <a href = "https://bard.google.com/" target = _blank>Bard</a>
            </div>
        </div>
    </body>
</html>

*CSS

.dropdown button{
    background-color: darkgrey; /* button color */
    color: white; /* font color */
    padding: 10px 10px; 
    cursor: pointer;
}

/* .dropdown:hover button{
    background-color: grey;
} */

.dropdown a{
    display: block;
    color: black; /* font color */
    text-decoration: none; /* to remove underline */
    padding: 10px 10px;
}

.dropdown .content{
    display: none; 
    position: absolute;
    background-color: lightgray;
    min-width: 90px;
}

.dropdown:hover .content{
    display: block;
}

This is what my drop-down button looks like when not interacted with:
enter image description here

Its list should only appear when my cursor is hovering above it like this:
enter image description here

And its shouldn’t appear when my cursor is hovering above it like this:
enter image description here

Or this:
enter image description here

How do I fix this?

Tags:

2

Answers


  1. 0

    use onMouseOver/onMouseEnter for opening and for closing: onMouseLeft eventListener

    if you want to do it with only css
    do

    body:hover .dropdown-menu{
  // your closing css here
}
    Login or Signup to reply.
  2. 0

    Your list appeared was because of parent container’s width is full width of the view port. That’s why when you hover the place outside the button the list appeared.
    enter image description here

    You could try to set the parent width to the content width;

    .dropdown button{
    background-color: darkgrey; /* button color */
    color: white; /* font color */
    padding: 10px 10px; 
    cursor: pointer;
}

/* .dropdown:hover button{
    background-color: grey;
} */

.dropdown a{
    display: block;
    color: black; /* font color */
    text-decoration: none; /* to remove underline */
    padding: 10px 10px;
}

.dropdown .content{
    display: none; 
    position: absolute;
    background-color: lightgray;
    min-width: 90px;
}

.dropdown:hover .content{
    display: block;
}

.dropdown{
    width: fit-content;
}
    <!DOCTYPE html>
<html>
    <link rel = "stylesheet" href = "style.css">

    <head>
        <title>Productivity Tools</title>
    </head>
    
    <body>
        <h1>TECH TEAM <img src = "imgs/ebmnhs_logo.jpg" style = "position:relative; left:1200px;" height = "50"></h1>
        <hr>

        <div class = "dropdown">
            <button>Text-generative AI</button>
            <div class = "content">
                <a href = "https://chat.openai.com/" target = _blank>ChatGPT</a>
                <a href = "https://bard.google.com/" target = _blank>Bard</a>
            </div>
        </div>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search