@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");


.menu1 ul {
    display: flex;
    flex-direction: column-reverse;
}
.menu1 li {
    width: 50px;
    height: 50px;
    padding: 30px;
    color: white;
    font-size: 50px;
}
.menu1 li:first-child {
    /*margin-left: 10px;*/
}

.menu1 .element1 {
    background-color: red;
}
.menu1 .element2 {
    background-color: green;
}
.menu1 .element3 {
    background-color: blue;
}
.menu1 .element4 {
    background-color: orange;
}


.menu2 ul {
    display: flex;
    flex-direction: row;
}
.menu2 li {
    width: 50px;
    height: 50px;
    padding: 30px;
    color: white;
    font-size: 50px;
}

.menu2 .element1 {
    background-color: red;
}
.menu2 .element2 {
    background-color: green;
}
.menu2 .element3 {
    background-color: blue;
}
.menu2 .element4 {
    background-color: orange;
}

.menu3 ul {
    display: flex;
    flex-direction: row-reverse;
}
.menu3 li {
    width: 50px;
    height: 50px;
    padding: 30px;
    color: white;
    font-size: 50px;
}

.menu3 .element1 {
    background-color: red;
}
.menu3 .element2 {
    background-color: green;
}
.menu3 .element3 {
    background-color: blue;
}
.menu3 .element4 {
    background-color: orange;
}

.menu4 ul {
    display: flex;
    flex-direction: column;
}
.menu4 li {
    width: 50px;
    height: 50px;
    padding: 30px;
    color: white;
    font-size: 50px;
}

.menu4 .element1 {
    background-color: red;
}
.menu4 .element2 {
    background-color: green;
}
.menu4 .element3 {
    background-color: blue;
}
.menu4 .element4 {
    background-color: orange;
}