mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-23 10:46:13 +02:00
Code Issues Releases Wiki Activity

Add nested dropdowns pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2020-01-13 23:59:14 +07:00
parent aabd3d5ffd
commit 02d9818c56
9 changed files with 291 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
client/patterns/nested-dropdowns/nested-dropdowns.css Normal file
View File

@@ -0,0 +1,43 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.p-nested-dropdowns {
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.p-nested-dropdowns li {
padding: 8px;
position: relative;
}
.p-nested-dropdowns ul {
border: 1px solid rgba(0, 0, 0, 0.3);
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
width: 200px;
}
.p-nested-dropdowns ul ul {
left: 100%;
position: absolute;
top: 0;
}
.p-nested-dropdowns li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.p-nested-dropdowns li:hover > ul {
display: block;
}