0
232
VisualizaçõesHow can I create a hover div?
If you go to https://www.handy.com/ and hover over the All Services link, you'll be able to see a overlay with a bunch of categories.
How can I do this so that it's SEO friendly?
See image attached
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
I would structure it like this, which in my opinion would be the most semantically correct. Just because everything is wrapped in a <div>, it doesn't mean it doesn't have semantic value. As long as the child elements have the proper HTML-structuring it's fine.
div>nav>ul>li {
font-size: 25px;
}
nav>ul>li>ul>li {
font-size: 15px;
}
div>nav {
display: none;
}
div:hover nav {
display: block;
}
ul {
list-style-type: none;
}<div><span>menu</span>
<nav>
<ul>
<li><span>category 1</span>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
<li><a>item 4</a></li>
<li><a>item 5</a></li>
</ul>
</li>
<li><span>category 2</span>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
<li><a>item 4</a></li>
<li><a>item 5</a></li>
</ul>
</li>
<li><span>category 3</span>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
<li><a>item 4</a></li>
<li><a>item 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta