hiding the language list until you mouse-overlanguage-selector

1 files changed, 46 insertions, 0 deletions

diff --git a/english/langSelector.css b/english/langSelector.css
new file mode 100644
index 00000000000..ccec2a2b7e2
--- /dev/null
+++ b/english/langSelector.css
@@ -0,0 +1,46 @@
+/*
+ * https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
+ */
+
+/* we don't use it as a button
+.dropbtn {
+  background-color: #4CAF50;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+}
+*/
+
+.pageLang {
+  position: relative;
+  /* display: inline-block; */
+}
+
+.langContainer {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  /* min-width: 160px; */
+  width: fit-content;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  padding: 10px 10px 10px 10px;
+}
+
+/* formating in a block - not practical
+.langContainer a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+*/
+
+.langContainer a:hover {background-color: #ddd;}
+
+.pageLang:hover .langContainer {display: block;}
+
+/*
+.pageLang:hover .dropbtn {background-color: #3e8e41;}
+*/