body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
/*    background-color: #f4f4f4; */
}

header {
    background-color: #484848;
/*  color: #fff; */
/*  padding: 1em 0; */
    padding: 8px 1px 1px 8px; /* Сверху | Справа | Снизу | Слева | padding: 2px 1em 0 1em; */
/*  text-align: center; */
}

nav {
    background: #484848;
    position: sticky;
    top: -1px;
    z-index: 5;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul:after {
    content: "";
    display: table;
    clear: both;
}

nav a {
    text-decoration: none;
    display: block;
}

.topmenu > li {
    float: left;
    position: relative;
}

.topmenu > li:first-child {
    border-left: 0;
}

.topmenu > li > a {  
    padding: 14px 10px;
    font-size: 16px;
    color: #FEFDFD;
}

/*  .topmenu > li > a.active,  */ 
.submenu a:hover {
    background-color: #3c763d;
    color: #fff;
}

.submenu {
    position: absolute;
/*  z-index: 5;  */
    min-width: 250px;
    background: white;
    border-top: 1px solid #CBCBCC;
    border-left: 1px solid #CBCBCC;
    border-right: 1px solid #CBCBCC;
    visibility: hidden;
}

.submenu li {
    position: relative;
}

.submenu li a {
    color: #282828;
    padding: 6px 10px;
    font-size: 16px;
    border-bottom: 1px solid #CBCBCC;
}

.submenu .submenu {
    position: absolute;
    left: 100%;
    top: -1px;
}

nav li:hover > .submenu {
/*  transform: rotateX(0deg);  */
    visibility: visible;
/*  opacity: 1;  */
}

nav li a:hover {
    background-color: #3c763d;
}

main {
    padding: 1em;
}

footer {
    background-color: #333;
    color: #fff;
/*  text-align: center; */
/*  padding: 1em 0; */
    padding: 1px 0 1px 0;   /* Сверху | Справа | Снизу | Слева | padding: 2px 1em 0 1em; */
/*  position: fixed; */
    width: 100%;
    bottom: 0;
}

footer a {
    color: #fff;
}