CODEWITHSUNDEEP
htmlcss
Distro
Distro

Reputation: 45

How do I edit the div:hover property?

FIXED

I have been tweaking the position and display elements of my css code and can't seem to figure out how to edit my code. I don't understand how the div should be edited. What I want is to allow the hover of the div only as to what the box size of the button is. But when I hover over the horizontal space where the buttons are aligned, the drop-down list appears even when it is not hovered directly on the button. Newbie in css editing here. Please help me.

#container {
  margin: 0px auto;
  /*
		width: 1815px;
		height: 820px;
		*/
  padding: 100px;
}
/*button style*/

.collegebtn {
width: 100px;
  color: white;
  display: block;
  padding: 25px;
  font-size: 30px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  font-family: 'Play', sans-serif;
  box-shadow: 0 2px 4px 0 rgba(0, 181, 91, 0.74), 0 3px 10px 0 rgba(0, 181, 91, 0.74);
}
/*button effects*/

.collegebtn:hover {
  background-color: #A10F31;
  opacity: 0.6;
}
/*position <div> for the content*/

.listdrop {
width: 100px;
  position: relative;
  display: block;
  margin-right: 40px;
  margin-bottom: 40px;
}
/*the hidden list*/

.listdrop-title {
  display: none;
  position: absolute;
  background-color: #ffffcc;
  max-width: inherit;
  text-align: center;
  z-index: 1;
}
/*the links in the dropdown*/

.listdrop-title a {
  color: black;
  padding: 10px 12px;
  display: block;
  text-decoration: none;
  font-family: 'Century Gothic';
}
/*bgcolor effects of links in dropdown*/

.listdrop-title a:hover {
  background-color: #f1f1f1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*this will show in hovering the titles*/

.listdrop:hover .listdrop-title {
  display: inline;
  text-align: center;
}
/*bgcolor changes on the shown dropdown*/

.listdrop:hover .buttondrop {
  background-color: #d1e0e0;
}
<body>
  <ul style="list-style: none;">
    <div id="container">
      <p>Welcome to our Collections</p>
      <div class="listdrop">
        <li>
          <button class="collegebtn"><a>Category by Title</a>
          </button>
        </li>
        <div class="listdrop-title">
          <a href="ProdList/SoftSol.html">Software</a>
          <a href="ProdList/HardSol.html">Hardware</a>
          <a href="ProdList/Others.html">Others</a>
        </div>
      </div>
  </ul>
  </div>
</body>

Upvotes: 0

Views: 86

Answers (1)

denns
denns

Reputation: 1121

just remove the button around the tag. You shouldn't nest these two!

so from <button class="collegebtn"><a>Category by Title</a></button> to <a class="collegebtn">Category by Title</a>

And don't forget to href="http://whereever" your <a>, cause otherwise you won't get the correct pointer on hover. At least href="#" should do the job.

update

I think the problem already was solved here. Thats a good minimalistic example :) https://stackoverflow.com/a/19396291/1841828

Upvotes: 1

Related Questions