Hyperlink/css issue

Question

I have the weirdest reaction on my page. My hyperlinks act as plain text. Not as a link. I just can't click on the links. Here is the thing, if I hide some of of the divs in the page the links are now working.

Here is what I get from reading the source of my page.

HTML

<div id="prodMenu">
  <div id="Menu"><a href="product.php">All</a></div>
  <div id="Menu"><a href="product.php?cat=Snake Whips">Snake Whips</a></div>
  <div id="Menu"><a href="product.php?cat=Floggers">Floggers</a></div>
  <div id="Menu"><a href="product.php?cat=Hand Floggers">Hand Floggers</a></div>
</div>

Here is the css related to my menu section

CSS

#prodMenu{
    position:absolute;
    width: 1000px;
    left: 50%;
    top:0px;
    margin-left: -500px;
}
#prodMenu > #Menu{
    display:block;
    float:left;
    margin: 5px;
    padding: 0 5px;
    font:10px;
}
#prodMenu > #Menu a{
    text-decoration:none;
    color:#838F97;
}
#prodMenu > #Menu a:hover{
    text-decoration:none;
    color:#C0E73D;
}

Any ideas how to fix this?

Yeah. Use a class instead <div class="Menu"> And then change your CSS selectors from #Menu to .Menu — Stan Shaw
– Stan Shaw, Commented Oct 29, 2014 at 14:35

DaniP · Accepted Answer · 2014-10-29 14:33:06Z

1

if I hide some of the divs in the page the links are now working

You have a z-index problem try setting this:

#prodMEnu {
   z-index:1000
}

As noted on the comments don't use the same ID on multiple elements, ID must be unique. Use classnames instead.

answered Oct 29, 2014 at 14:33

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richard Moreau Over a year ago

You are the best my friend. Thanks that was my issue.

Collectives™ on Stack Overflow

Hyperlink/css issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related