User menu on hover

This commit is contained in:
Yorin Anne De Jong 2018-08-10 22:37:24 +02:00
parent 928647e6cc
commit 1066f42861
1 changed files with 6 additions and 8 deletions

View File

@ -111,6 +111,9 @@ nav #usermenu {
background: #fff; background: #fff;
padding: 0; padding: 0;
z-index: 5; /* Make appear over #login */ z-index: 5; /* Make appear over #login */
border-radius: 0 0 0 0.1em;
box-shadow: 0 2px 2px gray;
} }
nav #login { nav #login {
z-index: 4; /* Make appear under #usermenu and over #menu */ z-index: 4; /* Make appear under #usermenu and over #menu */
@ -129,16 +132,11 @@ nav #usermenu li, nav #usermenu li a {
display: block; display: block;
margin: 0; margin: 0;
} }
nav #usermenu:target { nav #usermenu:target,
nav #usermenu:hover,
nav #login:hover ~ #usermenu {
display: block; display: block;
} }
/* Style #login when #usermenu is targeted */
/* Requires #login to appear after #usermenu, directly under nav */
nav #usermenu:target ~ #login {
color: #024;
fill: #024; /* SVG icon */
background: white;
}
nav #usermenu li:hover { nav #usermenu li:hover {
background: #eee; background: #eee;
} }