Question

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.