CODEWITHSUNDEEP
htmlcsshover
V.Dum
V.Dum

Reputation: 33

CSS Dropdown on Image Hover

I want to get a logo to be a dropdown image when hovering on it, but it didn't work, can you help please? 

dropdown {
  position: relative;
  display: inline-block;
}
dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
desc {
  padding: 15px;
  text-align: center;
}
dropdown:hover dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html lang="ro">


<head>
  <title>Evolutia sistemelor de operare Windows</title>
  <meta charset="utf-8">
</head>

<body>
  <div class="dropdown">
    <img src="winlogo.png" alt="Windows Logo" width="100" height="50">
    <div class="dropdown-content">
      <img src="winlogo.png" alt="Windows Logo" width="300" height="200">
      <div class="desc">Microsoft's OS Logo since Windows 8</div>
    </div>
  </div>
</body>

</html>

I am new to CSS and my first project must include this hover on a image, I mention that I need to use my css from mystyle.css, not using <style> inside index page.

Upvotes: 0

Views: 6844

Answers (2)

Thiago Teixeira
Thiago Teixeira

Reputation: 31

You forgot to put dot in front of the class names in the CSS file.

Your code is:

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

and you have to put it this way:

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

I think the best way to work with menu and dropdown is use the elements ul li intead. I advise you to use the front end libraries like Bootstrap or even Materialize-css, so easy to use and it follow a good practices.

Upvotes: 0

Asons
Asons

Reputation: 87191

You missed the dot for class rules in your CSS, should be .classname

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.desc {
  padding: 15px;
  text-align: center;
}
.dropdown:hover .dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html lang="ro">


<head>
  <title>Evolutia sistemelor de operare Windows</title>
  <meta charset="utf-8">
</head>

<body>
  <div class="dropdown">
    <img src="winlogo.png" alt="Windows Logo" width="100" height="50">
    <div class="dropdown-content">
      <img src="winlogo.png" alt="Windows Logo" width="300" height="200">
      <div class="desc">Microsoft's OS Logo since Windows 8</div>
    </div>
  </div>
</body>

</html>

Upvotes: 3

Related Questions