I am creating navigation menu. I want to use css so that anchor tag is wrapped around li element but anchor tags are inside li element.
Here is html
<ul>
<li><a href="">Uutiset</a></li>
<li><a href="">Foorumi</a></li>
<li><a href="">Kauppa</a></li>
<li><a href="">Messut</a></li>
<li><a href="">Asiakaspalvelu</a></li>
<li><a href="">Nakoislehti</a></li>
<li><a href="">Nae meidat</a></li>
</ul>
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
padding: 2% 4%;
border: 1px solid green;
a {
text-decoration: none;
display: block;
}
}
}
The only legal thing allowed inside a UL is an LI. You cannot have an anchor wrapped around the LI.
What you have in CSS is nearly there, just add:
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
And your anchor shall fill the entire space of the LI.