hi, I to try to come to a Bubble when someone is above a Link. I’ll to come with Hover a thing like this,
Can Please someone help me, Thanks!
hi, I to try to come to a Bubble when someone is above a Link. I’ll to come with Hover a thing like this,
Can Please someone help me, Thanks!
Found de solution from my Problem!
Here there are different forms for Hover and you can Download from them…
so, how I did it,
Html,
<ul>
<li class="dropdown"><a href=""><i>Home</i></a></li>
<div class="dropdown-content">
-----
-----
</div>
</ul>
Css,
.dropdow { list-style-type: none; }
.dropdown a { text-decoration: none; padding: 0.3rem 5rem 0.3rem 0.5rem;}
li a, #uber_us { text-decoration: none; }
.dropdown-content {
display: none;
font-size: 0.8125rem;
position: absolute;
background-color: #f1f1f1;
min-width: 0.9375rem;
box-shadow: 0rem 0.5rem 1rem 0rem rgba(0,0,0,0.2);
z-index: 1;
}
/* this code belong from them..... */
.dropdown-content:before {
pointer-events: none;
position: absolute;
z-index: -5;
content: '';
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
left: calc(20% - 10px);
top: -10px;
border-width: 0 12px 12px 12px;
border-color: transparent transparent #e7caca transparent;
}
/* here end the code from them ... */
.dropdown-content a {
color: black;
padding: 0.75rem 1.6875rem 0.9375rem 0.5rem;
text-decoration: none;
display: block;
font-size: 0.9375rem;
text-align: left;
font-weight: bold;
}
.dropdown-content a:hover { background-color: #e7caca; }
.dropdown:hover .dropdown-content {
display: block;
top: 2rem;
}