CSS inheritance question, why do my <p> tags do what my <a> tags are doing?

Question

Hi All,

I am a rookie CSS user, i have the following nav menu code and CSS to go along with it. The funny thing is that when i hover over the <p> element (You are viewing page xxx) in the nav menu, it changes colors as if it was an anchor tag, specifically hover.

I am very confused why it does this, I tried to be as specific as possible when selecting the anchor tags but it made no difference, I'm guessing it has something to do with inheritance but I'm not 100% sure. Can anyone explain to me why this is happening? Thanks

<?php 
// Generate the navigation menu
echo '<div id="navmenu">';
echo '  <p>';
echo '      <h3><a href="index.php">Compliance Report<a/> - <a href="nonreportinghubs.php">Non-Reporting Hubs<a/> - <a href="FastReportingHubs.php">Fast Reporting Hubs<a/> - ';
echo '      <a href="inactivehubs.php">Inactive Hubs<a/> - <a href="inactivebutreporting.php">Inactive But Reporting Hubs<a/><br />';
echo '      <a href="logins.php">Logins<a/> - <a href="customerlogins.php">Customer Logins<a/>  - <a href="checklogins.php">Check Logins<a/> - <a href="dbsize.php">Database Size<a/></h3>';
echo '  </p>';
echo '  <p> You are viewing <span class="page_title">' . $page_title . '</span></p>';
echo '</div>';
?>

#navmenu {
border:                         2px solid gray;
text-align:                     center; 
}

#navmenu a:link {
color:                          black;
}

#navmenu a:visited {
color:                          black;
}

#navmenu a:hover {
color:                          gray;
}

Answer 1

You close tags like: </a> not <a/>. <a/> will generate a new empty <a> and since you never close any of your <a>'s your whole <p> is basically the the <a> that is nested inside.

Answer 2

Your HTML is invalid.

You cannot have an <h3> element inside a <p> element. When you start the <h3> you end the paragraph (implicitly as end tags are optional for <p>). The browser then sees </p> as an error and silently discards it.

Get rid of the <h3>, whatever that data is, it isn't a sub-sub-heading anyway.

<a/> is nonsense as well. You probably mean </a>.

It looks like you would do well to learn to use http://validator.w3.org/ — it does a very quick and easy first pass QA for markup.

Answer 3

You are ending your anchor tags with <a/> instead of </a>