CSS inheritance question, why do my <p> tags do what my <a> tags are doing?
I am a rookie CSS user, i have the following nav menu code and CSS t开发者_StackOverflow中文版o 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;
}
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.
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.
You are ending your anchor tags with <a/>
instead of </a>
精彩评论