Add Css Coding Dropdowns examples.... (#28739)
This commit is contained in:
committed by
Randell Dawson
parent
2869e35be7
commit
75cbb52dbd
@ -99,3 +99,32 @@ Utilice Z Index si necesita colocar un elemento de fondo debajo de un contenedor
|
|||||||
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS _Posicionamiento / comprensión_ z\_index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
|
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS _Posicionamiento / comprensión_ z\_index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
|
||||||
|
|
||||||
[https://philipwalton.com/articles/what-no-one-told-you-about-z-index/](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)
|
[https://philipwalton.com/articles/what-no-one-told-you-about-z-index/](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
padding: 12px 16px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="dropdown">
|
||||||
|
<span>Mouse over me</span>
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<p>Hello World!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
Reference in New Issue
Block a user