CODEWITHSUNDEEP
htmlcss
NedOoO
NedOoO

Reputation: 13

how to fix hover option working on the whole row

I just started making a website for practicing and learning html and css, and i made like a about button on the top right so when you hover over it it displays information, but the hover function works all over the left row of the website.

HTML:

<div class="position">
    <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        </div>
    </div>
</div>

CSS:

/* Dropdown Button */
.dropbtn {
  background-color: #fff;
  color: #000;
  font-size: 20px;
  border: none;
  margin-left: 1370px;   
}

/* The container <div> */
.dropdown {
  position: absolute;
  display: inline-block;
}

/* Dropdown Content */
.dropdown-content {
  display: none;
  position: relative;
  background-color: #2841d1;
  min-width: 160px;
  max-width: 333px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-left: 1140px;
}

/* Text inside the dropdown */
.dropdown-content h4 {
  color: black;
  padding:15px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover */
.dropdown: hover .dropdown-content {display: inline-block;}

.position{
    position: relative;
}
.dropdown-content,h4{
    width: 40%;
    word-break: break-all;
}

Sorry for the bad code i just started learning html and css

Upvotes: 0

Views: 53

Answers (1)

wazz
wazz

Reputation: 5068

I think the problem might be that you have hover on .dropdown (which is the whole row), instead of on .dropdown-content.

You are talking about a hover function, which is javascript, and there's no javascript, so I'm not sure.

You have

.dropdown: hover .dropdown-content {display: inline-block;}
  1. hover on the wrong item
  2. missing comma
  3. extra space (not sure if that's a problem).

Update

.dropdown, .dropdown-content:hover { display: inline-block; }

(I think something else might be missing from your problem-description, or code.)

Upvotes: 1

Related Questions