I'm trying to create a drop-menu but the tag <a>
and :hover
does not work, when I step or mouse over it it looks like it has nothing.
#menu-block {
width: 100%;
height: 42px;
margin-top: 5px;
background: #111111;
}
.menu {
padding: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: space-around;
}
.menu li a {
display: none;
color: #fff;
position: absolute;
font: bold 100% Arial, Tahoma, Helvetica;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.menu li {
width: 10%;
height: 42px;
position: relative;
}
.menu li a {
width: 100%;
height: 100%;
transition: background 1s ease;
position: relative;
}
.menu li a:hover {
transition: 2s ease;
background: #00b2ff;
}
.menu li a:not(:hover) {
transition: 3s ease;
}
.menu li ul {
width: 100%;
height: auto;
position: relative;
display: block;
}
.menu li ul li {
width: 100%;
height: 42px;
position: relative;
background: #1a1a1a;
border-style: solid;
border-width: 1px;
border-color: #00b2ff;
}
.menu li ul li a {
width: 100%;
height: 100%;
}
.menu li ul li:hover {
background: #00b2ff;
}
<div id="menu-block">
<ul class="menu">
<li><a href="#"><span>NOTICIAS</span></a>
<ul>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
<li>
<a href="#">
<p>PAGINA</p>
</a>
</li>
</ul>
</li>
<li><a href="#"><span>SOBRE</span></a></li>
<li><a href="#"><span>CONTATO</span></a></li>
</ul>
</div>