0

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>
Distro
  • 63
  • 1
  • 11

1 Answers1

1

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

Community
  • 1
  • 1
denns
  • 1,105
  • 1
  • 11
  • 24
  • Thanks for emphasizing that nest.. Still, the display is messing up.. I just want the drop-down list to show when the cursor is hovered only over the button but still the space containing its' div is allowing it to show the drop-down list even when the cursor hits anywhere on the horizontal space where the button is aligned.. – Distro Jul 06 '16 at 12:12
  • ah now i get it, but unfortunately the dropdown will disapear if you unhover the button resulting in never being able to reach the submenu with the mouse. now that i understood what you meant i'll give a better example. – denns Jul 06 '16 at 12:32
  • What he wanted there was for the submenus to show when the main menus were hovered. My problem is more of the div space.. and I could see the jsfiddle sample snippet in that problem and it shows the submenus even when the cursor is not hovered ('positioned') over the menu 'links' (in this case, buttons). Not the same problem.. Thanks for the link though.. – Distro Jul 06 '16 at 13:31
  • I have fixed this by putting a fixed div width and button width. Thanks to all who commented and edited to this post. – Distro Jul 07 '16 at 09:46