* {
    margin: 0;
    padding: 0;
}

.container {
    background-color: beige;
    height: 100vh;
}

.navbar {
    height: 10vh;
    background-color: black;
    display: flex;
  
}

.logo {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: xx-large;
    color: blue;
}

.menu {
    display: flex;
    flex: 2;
}

.menu-items {
    /* navbar has a height of 10vh of any element inside it, if it has the same line height it will be centred */
    line-height: 10vh;
    flex: 1;
    font-size: 1.2rem;
    text-align: center;
}

a {
    text-decoration: none;
}

.sub-menu {
    display: none;
}

.menu-items:hover .sub-menu {
    display: block;

}

.menu-items:hover {
    background-color: blue;
}