Reputation: 11
I'm having a simple problem with validating a piece of code. would like some input as to what i'm doing wrong. when i validate it it gives a warning saying i should close the anchor tag. but i need both the header and the paragraph to be highlighted using css. the html code is below
<li>
<a href="#">Home</a>
<div class="menu-dropdown">
<div class="menu-items">
<a href="#">
<h4>Why Choose Cyberskills?</h4>
<p>There are a number of reason to choose Cyberskills. Click here to find out more...</p>
</a>
</div>
</div>
</li>
the css code is below
menu-items a{
display: block;
padding: 10px;
text-shadow: 1px 1px 1px #666666;
text-decoration: none;
color: #000000;
}
.menu-items a:hover{
display: block;
background: #666666;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
Upvotes: 1
Views: 1290
Reputation: 15938
In HTML5 this is valid. In XHTML 1.0 Transitional not, cause it is not allowed to put "block tags" inside of a link. Block tags are tags in HTML which got display: block
per default, like: div
, p
, h1
, h2
, ...
You could use <span>
instead of h4
and p
or put the links inside of h4
and p
.
Upvotes: 2