CODEWITHSUNDEEP
csshtmlposition
user3562302
user3562302

Reputation: 43

Absolute position is not allowing my link to display

i have this jsfiddle which as you can see when you hover of the Link the Hidden link should display but because of the position absolute it doesnt. Any idea how to make the link display without changing the position: absolute

I tried z-index to no go

Upvotes: 0

Views: 143

Answers (4)

Andrew Hardt
Andrew Hardt

Reputation: 1

In your css .wrapper .nav ul {}, you have the top: 100%;. If you change that to say, 100px, it shows. Of course position it where you want by adjusting the pixels.

Upvotes: 0

Markus
Markus

Reputation: 761

It's actually appearing; however, it's relative to the previous element in the hierarchy that has a relative position.

.wrapper {
  height: 33px;
  position:relative;
}

I'm not sure which element you want it relative to. In my example, I made it relative to your wrapper.

Upvotes: 0

Pirata21
Pirata21

Reputation: 449

The link are displayed, but in the bottom of the page, if you change the CSS you must see the link:

.wrapper .nav ul {
display: none;
position: absolute;
width: 200px;
top: 10px;
left: 0;
}

Upvotes: 0

Tomáš Blatný
Tomáš Blatný

Reputation: 902

The hidden link has position: absolute; and top: 100%;, so it displays 100% from top (thats why scrollbar appears after hover). Change the top property to something different and you will see the result.

Upvotes: 1

Related Questions