Reputation: 29
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
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)
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
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