CODEWITHSUNDEEP
htmlcssdrop-down-menu
Rubixryan
Rubixryan

Reputation: 107

Trouble with hover menu on a link

I am trying to get a link (<a></a>) that contains an image, when the link is hovered over that a hover menu appears below it(in this case, just one button). The button that appears, I wish to have a link on it.

HTML:

<a href="#">
  <img src="My_Image.jpg" width="420" height="280" />
  <ul>
      <a><li>Buy</li></a>
  </ul>
</a>

CSS:

a {
  padding: 5px; margin: 0px;
  position: relative;
  display: inline-block;
}
a ul{
  padding: 0px; margin: 0px;
    list-style: none;
    position: absolute;
    left: -9999px;
  width: 100%;
}
a ul li{
  padding: 5px;
  background-color: black;
  white-space: nowrap;
  text-align: center;
}
a:hover ul {
  left: 0;
}

My trouble is that when I add the link (a) tags inside the ul tag the css formatting for the ul and all its descendants don't pick up anymore. I hope this is clear enough, let me know if you need me to explain some more.

Upvotes: 0

Views: 76

Answers (2)

JP.
JP.

Reputation: 257

From your first comment to Adrian, you want the link text to display on top of the image, and upon hovering over the image, a buy button will display beneath the image. Assuming that, this might work:

div {
    padding: 5px; margin: 0px;
    position: relative;
}
div ul{
    list-style: none;
    display: inline-block;
}
div ul li{
    padding: 5px;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 10px;
}
div ul li a{
    position: relative;
}
div ul li a span{
    position: absolute;
}
div ul li button{
    visibility: hidden;
}
div ul li:hover button{
    visibility: visible;
}

and the HTML something like:

<div>
  <ul>
      <li><a href="#"><img src="My_Image.jpg" width="420" height="280" /><span>Description</span></a>
        <br/><button>Buy Image 1</button>
      </li>
      <li><a href="#"><img src="My_Image.jpg" width="420" height="280" /><span>Description</span></a>
        <br/><button>Buy Image 2</button>
      </li>
  </ul>
</div>

Upvotes: 1

Adrian Preuss
Adrian Preuss

Reputation: 3113

Your Syntax is "incorrect". Block elements in inline elements are forbidden by specification. If you need to create an List based menu, set the "Sub menu" after the Link-Tag:

 <ul>
      <li>
           <a href="#">Your Link</a>
           <ul>
                <li><a href="#">Sublink</a></li>
           </ul>
      </li>
 </ul>

Upvotes: 1

Related Questions