.

sd-card/html/style.css

@@ -20,7 +20,7 @@ body, html {
     flex-grow: 1;
     margin: 5px 0px 4px 0px; 
     padding: 0; 
-    border: 2px solid black;
+    border: 2px solid #333; /* black */
 }
 
 h1 {
@@ -43,50 +43,20 @@ p {
 
 
 
+
+
+
+
+
 .menu {
   margin: 0px;
   padding: 0px;
+  font-family: "Arial";
   font-size: 18px;
-    font-weight:normal;
-/*     color:#6D6D6D;         */
-/*   height: 50px; */
-}
-
-.menu ul{
-    height:50px;
-    list-style:none;
-    background-color: #333;
-/*     color: white; */
-    padding: 14px 16px;
-}
-
-.menu li{
-    float:left;
-    padding:0px;
-}
-    
-.menu li a{
-    color:white;
-/*     display:block; */
-    display: inline-block;
-/*     font-weight:normal; */
-    line-height:50px;
-/*     font-size: 18px; */
-    margin:0px;
-    padding:0px 25px;
-    text-align:center;
-    text-decoration:none;
-}
-
-
-/*.menu {
-  margin: 0px;
-  padding: 0px;
-  font-family: "Times New Roman";
-  font-size: 14px;
   font-weight: bold;
-  color: #6D6D6D;
+  width: 1008qpx;
-}*/
+  background: #333; /* black */
+}
 
 .menu ul {
   height: 50px;
@@ -100,8 +70,10 @@ p {
   padding: 0px;
 }
 
+/* Top Menu */
 .menu li a {
   color: white;
+  background: #333; /* black */
   display: block;
   font-weight: normal;
   line-height: 50px;
@@ -111,40 +83,30 @@ p {
   text-decoration: none;
 }
 
-.menu li a:hover, .menu ul li:hover a{
+/* Selected top menu, 1th submenu */
+.menu li a:hover,
+.menu ul li:hover a {
+  background: red;
   color: white;
-    background-color: red;
-    
-    display: inline-block;
-/*     height: 50px; */
   text-decoration: none;
-/*     overflow: hidden; */
-    
-/*     display: block; */
-    margin:0px;
-    padding:0px 25px;
-    
-/*    line-height:50px;
-    font-size: 18px;
-    margin:0px;
-    padding:0px 25px;*/
 }
 
 .menu li ul {
-    background: white;
+  background: #f9f9f9; /* light gray */
   display: none;
   height: auto;
   padding: 0px;
   margin: 0px;
   border: 0px;
   position: absolute;
-    width: 210px; /*160px + 50px; */
+  width: 210px;
-/*     z-index:200; */
+  z-index: 200;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }
 
 .menu li:hover ul {
   display: block;
+
 }
 
 .menu li li {
@@ -152,64 +114,44 @@ p {
   float: none;
   margin: 0px;
   padding: 0px;
-    width:160px;
+  width: 210px;
 }
 
+/* 1th menu */
 .menu li:hover li a {
-    background:none;
+  background: #f9f9f9; /* light gray */
-    color: black;
+  color: #333; /* black */
-    background-color: #f1f1f1;
 }
 
 .menu li ul a {
   display: block;
   height: 50px;
-    font-style:normal;
+/*   font-style: normal; */
   margin: 0px;
   padding: 0px 10px 0px 15px;
   text-align: left;
-    width:160px;
-}
-
-.menu li:hover li a{
-    background:none;
 }
 
+/* Selected 1th menu */
 .menu li ul a:hover,
-.menu li ul li:hover, 
+.menu li ul li:hover a {
-.menu li ul li ul a:hover,
+  background: red;
-.menu li ul li ul li:hover{
   border: 0px;
-    text-decoration:none;
   color: white;
-    background-color: red;
-    width:160px;
-/*     margin: 0; */
-}
-
-.menu li ul li ul li ul a:hover,
-.menu li ul li ul li ul li:hover
-{
-    border:0px;
   text-decoration: none;
-    color:white;
-    width:160px;
-/*     width:260px; */
-/*     margin: 0; */
 }
 
 .menu p {
   clear: left;
-    color: green;
 }
 
 .menu ul li ul li {
   position: relative;
 }
 
-.menu ul li ul li ul, .menu ul li:hover ul li ul {
+.menu ul li ul li ul,
+.menu ul li:hover ul li ul {
   display: none;
-    margin-left:50px;
 }
 
 .menu ul li ul li:hover ul {
@@ -220,16 +162,24 @@ p {
 }
 
 .menu ul li ul li:hover ul li a {
-    color: black; 
+  color: #333; /* black */
+  background: #eeeeee; /*light gray */
 }
 
 .menu ul li ul li:hover ul li a:hover {
-    color: black; 
+  background: red;
+  color: white;
 }
 
-/*
+
+
+
+
+
+
+
 .arrow {
-  border: solid black;
+  border: solid #333; /* black */
   border-width: 0 3px 3px 0;
   display: inline-block;
   padding: 3px;
@@ -241,7 +191,7 @@ p {
   -webkit-transform: rotate(-45deg);
   
   position: absolute;
-  right: -40px;
+  right: 10px;
   top: 20px;     
   width:0px; 
   height:0px; 
@@ -253,4 +203,4 @@ p {
   border-bottom: solid white;
   border-right: solid white;
   margin: 0px 0px 2px 5px;
-}*/
+}