user3693564
user3693564

Reputation: 29

Hyperlinks not working on navigation bar - not clickable

My links are not working on my navigation bar. I cannot figure out what I've done wrong. This is the code. HTML:

<div id="menu"
<ul>
    <li><a href="http://kerryaltmantest.info">Home</a></li>
    <li><a href="http://kerryaltmantest.info/aboutme.html">About Me</a></li>
    <li><a href="publications">Publications</a></li>
    <li><a href="location">Location</a></li>
    <li><a href="strategicinteractions">Strategic Interactions</a></li>
</ul>

And CSS:

#menu {
    width: 950px;
    height: 35px;
    font-size: 20px;
    font-family: cambria, Georgia, sans-serif;
    font-weight: bold;
    text-align: center;
    background-color: #FFF;
    border-radius: 0px;
margin-top: -175px;
margin-left: 25px;
}

#menu li {
    display: inline;
    padding: 20px;
}

#menu a {
    text-decoration: none;
    color: #2B297F;
    padding: 8px 8px 8px 8px;
}

#menu a:hover {
    color: #2B297F;
    background-color: #999;
}

I'm sure it's just something I'm missing. If you want to see the site itself to understand what mean, you can find it at http://kerryaltmantest.info

Thank you!

Upvotes: 0

Views: 226

Answers (2)

Savion  Smith
Savion Smith

Reputation: 46

It looks like one of your divs is in front of your nav bar. Through a close investigation, I found that the div .mainrunner is overlapping the nav bar... (Red border) enter image description here

If you try to remove it from your css, you will see that your nav is now clickable... YAY!

Let me know if anything else comes up!

Upvotes: 1

Sid
Sid

Reputation: 801

Your Parent Div is overrides your Menu

Here I had added Working Fiddle

Click on Home in Fiddle

Working Demo Use This CSS at your Index Page too

#menu {
width: 950px;
height: 35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
/* margin-top: -175px; */
margin-left: 25px;
}

Upvotes: 1

Related Questions